基本無料でリモート開発環境を作るためのレシピ（Visual Studio Code+AWS）

こんにちは！
エイチームブライズでサイト開発を行っている@aoi_coro_です。

この記事は[Ateam Brides Inc. Advent Calendar 2019](https://qiita.com/advent-calendar/2019/a-t-brides)　９日目の記事です。

今日は備忘録も兼ねて、簡単に環境を構築する方法を書こうと思います。
過去の自分がこんな記事が欲しかったなぁと思ったので。
きっともっとLV高い記事は他のメンバーが書いてくれるから、気軽にいこう:lollipop:

-背景-
Web開発をするには開発環境がいるらしい。

同僚A ＜ Dockerいれちゃえば簡単ですよ〜
転職したての私 ＜ 今度にする。（Dockerいるほどじゃないんだ、まだ）

:thinking:
さて、でもどうやってやろうか。
クラウド9とか使えば簡単だろうけど、自動的に課金されるのはやだなぁ
ちゃんとお金かかるところはわかってる状態で、自分で使うときに払いたいし。

# ローカルに何も入れたくない病患者
ローカルにはVisual Studio Codeを入れます。これだけ。
ローカルには何も入れたくない。ソースコードも置きたくない。
ローカル環境で実行すればそりゃ無料でサーバーも動かせるけど、
自分のPCにわけのわからないものをいれたくない。mac壊れたら消えちゃうし。

そうだ:bulb:全部AWSに置いちゃえ！VScodeでリモート接続すればいいじゃない！

[VS Code Remote Developmentの公式ページより](https://code.visualstudio.com/docs/remote/remote-overview "VS Code Remote Development")
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/9d8ffcf4-b97c-26b1-11a3-476c897564c2.png)

というわけで、準備するものは2つ

- mac
- awsアカウント（新規登録なら12ヶ月間は無料で使えるものが多いので）

# Visual Studio Codeを入れよう！
いっぱい記事があるので参考にどうぞしようと思ったけど、macを最新のCatalinaにしたら「"Visual Studio Code.app"が悪質なソフトウェアかどうかをAppleでは確認できないため、このソフトウェアは開ません。」って怒られたから、補足。

ダウンロードはここから
https://code.visualstudio.com/Download

解凍して→アプリケーションのフォルダに入れる。
あとは開くだけ！と思いきや。

「![スクリーンショット 2019-12-08 21.10.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/4204dd76-6251-d0f6-c3c7-ef1929841842.png)

なんか出た。
ちなみにmacのバージョンはCatalina 10.15.1です。

とりあえずOK押して、システム環境設定→セキュリティとプライバシーを開く。
![スクリーンショット 2019-12-08 22.28.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/f46f4e6c-a659-47b9-99f9-42b88b52641c.png)

「このまま開く」から、開くとちゃんと開けるようになります。

さて、VSCodeが入ったは良いけれど…英語なんか嫌いだ。日本語でおk。

日本語にする拡張機能にありがとうありがとうする。
「Japanese Language Pack for Visual Studio Code」
![スクリーンショット 2019-12-08 22.31.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/e9c72ece-6bd4-7e06-9ebd-fb8252d42096.png)

あとリモートで接続したいから拡張機能にありがとうありがとうする。
「Remote Development」
![スクリーンショット 2019-12-08 23.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/ba3f8122-967c-461e-fcfb-4ea4f8c8af7a.png)


開き直して、VSCodeは準備OK

# AWSに繋ごう！

AWS分かり辛いんですよねー。
だから分かりやすい記事がたくさんあるので、ありがたいです。

とりあえず登録は本家みてやる。
https://aws.amazon.com/jp/register-flow/

お世話になった記事で初期設定をする。
[AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ](https://qiita.com/tmknom/items/303db2d1d928db720888 "AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ")

:chipmunk:＜IAMの設定は絶対にする、絶対にだ！（セキュリティ大事）

あとはEC2インスタンスを作るだけ。
t2.microなら無料枠内で使えるからとても素敵。
この記事がわかりやすい。
[AWS EC2でWebサーバーを構築してみる]
(https://qiita.com/arashida/items/629aaed33401b8f2265c "AWS EC2でWebサーバーを構築してみる")
ちょっと古いから、選択するインスタンスだけこっち。
「Amazon Linux AMI 2018.03.0 (HVM), SSD Volume Type - ami-0ab3e16f9c414dee7」
![スクリーンショット 2019-12-08 23.27.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/b3a447eb-0b95-a56f-eb5a-e7d1a74674f7.png)

立てたままだと停止してても無料枠つかってるので、いらなくなったら削除するのを忘れずに！

AWSの準備OK

# リモート接続する

色々記事はあったけど、分かり辛かったからまとめてみた。

## ダウンロードしたキーペアのpemファイルの位置と権限を変える
VScodeで上のターミナルから「新しいターミナル」を開いて
![スクリーンショット 2019-12-09 0.34.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/6e2e9e88-eab5-b039-5bd1-70addd559813.png)

pemファイルを移動するコマンドを実行。
「coro-php.pem」は自分のつけた名前に変更すること。
`mv Downloads/coro-php.pem ./.ssh`

移動した先のフォルダに移動して
`cd ./.ssh`

権限も変更
`chmod 400 coro-php.pem`

## Configファイルの設定
VSCodeの左下の「><」を押す
![スクリーンショット 2019-12-09 0.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/f3da50f4-32e2-c2dc-e0e0-c015bf6ad356.png)

Remote-SSH:Open Configuration Fileを押す
![スクリーンショット 2019-12-09 0.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/c4f6cbc3-7d2d-f237-2776-e4b1b333b9ef.png)

Configファイルを選択。
私は自分のユーザー配下にしました。
ユーザー名のところは自分のユーザーに変更で。
`/Users/ユーザー名/.ssh/config`

設定内容はこんな感じ

```
Host coro-php
    HostName ec2-3-113-21-94.ap-northeast-1.compute.amazonaws.com
    User ec2-user
    IdentityFile /Users/ユーザー名/.ssh/coro-php.pem
```
Hostは好きな名前をつけます。（これは接続先として表示されます。）
HostNameとUserにはAWSの接続から、sshのコマンドを確認して記入
![スクリーンショット 2019-12-09 0.25.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/8a224e60-2770-9988-0c95-06e226a16bc7.png)

`ssh -i "coro-php.pem" ec2-user@ec2-3-113-21-94.ap-northeast-1.compute.amazonaws.com`
@の前がユーザー名、@の後ろがHostNameです。

ちなみに、EC2を停止→開始するたびに変わるので、毎回HostNameの変更必須というね…
固定もできるけど後日かなー。
Configファイルを上書き保存。

## 接続してみる
VSCodeの左下の「><」を押す
![スクリーンショット 2019-12-09 0.06.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/f3da50f4-32e2-c2dc-e0e0-c015bf6ad356.png)

今度は「Remote-SSH:Connect to Host」を押す
![スクリーンショット 2019-12-09 1.40.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/b7139743-82c3-a5f7-2862-4f8661a380c5.png)

Host名がでてくるので、作ったHost名を押す。
![スクリーンショット 2019-12-09 1.43.05 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/836acd35-4a73-f487-ac60-507178a0c33e.png)

Continueして
![スクリーンショット 2019-12-09 1.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/900ecb7e-ba9a-b531-3298-9cefdef5075c.png)

:tada:接続完了:tada:　お疲れ様でした！
![スクリーンショット 2019-12-09 1.57.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/5473f3ad-4ee2-b0e0-6dab-4048889f503e.png)

# 後片付け
とりあえずインスタンスは停止して、VSCodeのリモートもこれで切れます。
![スクリーンショット 2019-12-09 2.45.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253515/73a51491-4bc2-f34b-f077-3dad31f92153.png)

まぁAWSのEC2インスタンスにつながっただけなんですけど。
でも欲しいのはこのなんでもいれれる器だったからよしとします。

さて何をいれようかな。phpいれたくてphpって名前つけたからphp入れようかな〜:musical_note:

# 終わりに
ここまで読んでくださってありがとうございました。:blush:

そして、社内勉強会でVScodeのリモート接続を教えてくださった。
@fussy113さんと@mkinさんに感謝を捧げます。
本当に便利です。ありがとう！:two_hearts:

コード書きたいけど環境作るのどうすればいいの…と途方に暮れた過去の私にこの記事が届きますように。
phpなら@rf_psさんの[AWS/Laravel連載](https://qiita.com/rf_p/items/3265fff5799a8ac000f9 "AWS/Laravel連載")で中身がはいるよ！やったね！


# 私たちのチームで働きませんか？
![alt](https://brides.a-tm.co.jp/wp-content/uploads/2019/11/ATEAM_BRIDES.jpg)
[エイチーム](https://www.a-tm.co.jp/)は、インターネットを使った多様な事業を展開する**名古屋の総合IT企業**です。
そのグループ会社である**株式会社エイチームブライズ**では、一緒に働く仲間を募集しています！

- [ハナユメ サイト開発グループ](https://jobs.qiita.com/employers/brides-a-tm/development_teams/138)
- [HIMARI開発チーム](https://jobs.qiita.com/employers/brides-a-tm/development_teams/147)
- [技術開発部](https://jobs.qiita.com/employers/brides-a-tm/development_teams/148)

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずは**チャットでざっくばらんに話**をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

[Qiita Jobs](https://jobs.qiita.com/)よりメッセージお待ちしております！