EC2にフロントエンド開発ができる環境構築をしていくぞ〜〜
あわせてコマンドが色々わからなかったので解説もしてみる
ところどころ間違えてそうなので直してほしい
別にAWSじゃなくても、ローカルPCに環境構築するのでも同じだと後から気が付きました
なので、ローカルに環境構築したい人の参考にもなるはず
環境: AWS Linux
(WindowsとかMacOSの人はこの記事は参考にならないよ)
コメント大歓迎![]()
EC2インスタンスの立ち上げ & 接続
インスタンスを作ってなかったらこっちの記事の1-4を見てね
ここから先は、ターミナルからインスタンスにSSHで接続してる前提でいきます
gitのインストール
sudo yum install git
yumはAWS Linuxのパッケージマネージャーで、macOSのbrewみたいなやつ
Linux系だとapt-getとかもあるけど、このインスタンスではyumを使ってパッケージをインストールする
Node.js & npm のインストール
AWSの公式の手順でやっていく
流れ: nvmインストール
Nodeインストール(npmも一緒に入る)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
nvmのバージョンに応じてv0.34.0のとこは変えてね
執筆時点だと、nvmの最新バージョンはv0.35.3だったんだけど、AWSのdocsがv0.34.0だったので、とりあえずそっちに従ってみた
-
curl: ネットワーク上でデータを転送するためのコマンド (Wikipediaより翻訳) -
-oオプション: 出力先を指定する -
-引数: stdout (標準出力)を意味する引数(argument) -
|(「パイプ」と読む): パイプの前にあるやつをパイプの後にあるやつに流す。つまりパイプ -
bash: このターミナル/シェル/黒い画面のことを指す
-oの使い方は、例えば curl -o "filename.txt" http://www.hoge.com/hogehoge.shだったら、hogehoge.shをfilename.txtに出力する
このコマンドでやってることは、
nvmのインスールスクリプトをインストールするためのシェルスクリプトをhttps://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.shからダウンロードする
シェルの標準出力に出す
nvm.shが入る
. ~/.nvm/nvm.sh
nvm.shが入ったのでこのシェルスクリプトを実行して、nvmをインストール
.はsourceと同じで、シェルスクリプトを実行するコマンド
ここでは~/.nvm/nvm.shにあるファイルを実行している
nvm install node
nvmでnodeをインストールする
(npmとかyarnと同じ構文)
npm i -g yarn
npmが入ったので、npmを使ってyarnを入れる
※yarn公式では非推奨のやり方。今回は力尽きたのでこの方法でやった
VSCodeで開発
Remote-SSHプラグインを入れる
VSCodeのExtensionsから探すか、[ここ]((https://code.visualstudio.com/docs/remote/ssh)からダウンロードする
SSH接続は公式に書いてあるとおりにやります
- F1キーを押して Remote-SSH: Add New SSH Hostを選択
-
ssh -i <.pemファイルへのパス> ec2-user@<インスタンスのIP>を入力 - config fileを聞かれるので、適当に選ぶ(わたしは/etc/ssh/ssh_configがドロップダウンの中にあったので、それにした)
- 左のタブのファイル > 「Open Folder」ボタンで、リモートのフォルダを開く
4でリモートじゃなくてローカルのフォルダが開いちゃったら、ローカルに接続したままなので接続しなおす(F1キー
Remote-SSH: Connect to Host)
参考までのスクショたち ![]()
SSH接続してると、左下に接続先が表示される
おわり
あとは、git cloneとかでソースコードをリモートにおいて、リモートにSSHしたVSCodeで開発すればok ![]()
おまけ
yarnしようとしたらこんなエラーが出た ![]()
make: g++: コマンドが見つかりませんでした
くわしく調べなかったけど、C++コンパイラがインストールされてなかったせいらしい
この記事を参考にこのコマンドを叩いたら治った
sudo yum -y install gcc-c++

