1
3

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.

Node.js, npm, yarn, gitの環境構築+コマンド解説

Last updated at Posted at 2020-05-25

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

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

環境: AWS Linux
(WindowsとかMacOSの人はこの記事は参考にならないよ)

: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++
1
3
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
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?