Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

AWSのEC2インスタンスにNode.js, npm, yarn, gitを入れる

$
0
0

EC2にフロントエンド開発ができる環境構築をしていくぞ〜〜
あわせてコマンドが色々わからなかったので解説もしてみる
ところどころ間違えてそうなので直してほしい

別にAWSじゃなくても、ローカルPCに環境構築するのでも同じだと後から気が付きました
なので、ローカルに環境構築したい人の参考にもなるはず

:zap:コメント大歓迎:zap:

EC2インスタンスの立ち上げ & 接続

インスタンスを作ってなかったらこっちの記事の1-4を見てね
ここから先は、ターミナルからインスタンスにSSHで接続してる前提でいきます

gitのインストール

sudo yum install git

yumはAWS Linuxのパッケージマネージャーで、macOSのbrewみたいなやつ
Linux系だとapt-getとかもあるけど、このインスタンスではyumを使ってパッケージをインストールする

Node.js & npm のインストール

AWSの公式の手順でやっていく

流れ: nvmインストール :arrow_right: Nodeインストール(npmも一緒に入る)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

:warning: 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.shfilename.txtに出力する

このコマンドでやってることは、
nvmのインスールスクリプトをインストールするためのシェルスクリプトをhttps://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.shからダウンロードする
:arrow_right:シェルの標準出力に出す
:arrow_right: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接続は公式に書いてあるとおりにやります

  1. F1キーを押して Remote-SSH: Add New SSH Hostを選択
  2. ssh -i <.pemファイルへのパス> ec2-user@<インスタンスのIP>を入力
  3. config fileを聞かれるので、適当に選ぶ(わたしは/etc/ssh/ssh_configがドロップダウンの中にあったので、それにした)
  4. 左のタブのファイル > 「Open Folder」ボタンで、リモートのフォルダを開く

:warning: 4でリモートじゃなくてローカルのフォルダが開いちゃったら、ローカルに接続したままなので接続しなおす(F1キー :arrow_right: Remote-SSH: Connect to Host)

参考までのスクショたち :arrow_down:

image.png

image.png

SSH接続してると、左下に接続先が表示される

おわり

あとは、git cloneとかでソースコードをリモートにおいて、リモートにSSHしたVSCodeで開発すればok :tada:

おまけ

yarnしようとしたらこんなエラーが出た :arrow_down:

make: g++: コマンドが見つかりませんでした

くわしく調べなかったけど、C++コンパイラがインストールされてなかったせいらしい
この記事を参考にこのコマンドを叩いたら治った

sudo yum -y install gcc-c++

Viewing all articles
Browse latest Browse all 8691

Trending Articles