14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-08

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

この記事はAteam Brides Inc. Advent Calendar 2019 9日目の記事です。

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

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

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

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

ローカルに何も入れたくない病患者

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

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

VS Code Remote Developmentの公式ページより
image.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

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

とりあえずOK押して、システム環境設定→セキュリティとプライバシーを開く。
スクリーンショット 2019-12-08 22.28.31.png

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

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

日本語にする拡張機能にありがとうありがとうする。
「Japanese Language Pack for Visual Studio Code」
スクリーンショット 2019-12-08 22.31.27.png

あとリモートで接続したいから拡張機能にありがとうありがとうする。
「Remote Development」
スクリーンショット 2019-12-08 23.04.34.png

開き直して、VSCodeは準備OK

AWSに繋ごう!

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

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

お世話になった記事で初期設定をする。
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

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

AWSの準備OK

リモート接続する

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

ダウンロードしたキーペアのpemファイルの位置と権限を変える

VScodeで上のターミナルから「新しいターミナル」を開いて
スクリーンショット 2019-12-09 0.34.18.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

Remote-SSH:Open Configuration Fileを押す
スクリーンショット 2019-12-09 0.09.01.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

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

今度は「Remote-SSH:Connect to Host」を押す
スクリーンショット 2019-12-09 1.40.43.png

Host名がでてくるので、作ったHost名を押す。
スクリーンショット 2019-12-09 1.43.05 1.png

Continueして
スクリーンショット 2019-12-09 1.55.34.png

:tada:接続完了:tada: お疲れ様でした!
スクリーンショット 2019-12-09 1.57.33.png

後片付け

とりあえずインスタンスは停止して、VSCodeのリモートもこれで切れます。
スクリーンショット 2019-12-09 2.45.52.png

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

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

終わりに

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

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

コード書きたいけど環境作るのどうすればいいの…と途方に暮れた過去の私にこの記事が届きますように。
phpなら@rf_psさんのAWS/Laravel連載で中身がはいるよ!やったね!

私たちのチームで働きませんか?

alt
エイチームは、インターネットを使った多様な事業を展開する名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています!

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

Qiita Jobsよりメッセージお待ちしております!

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?