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++