メモ > 技術 > フレームワーク: Nuxt.js > AWSのEC2上で実行する
AWSのEC2上で実行する
※Nuxt.jsのみでも実行できるが、Nginxを併用するのが定番みたい
AmazonLinux2へNuxt.js導入手順 - Qiita
https://qiita.com/deehii/items/58e6da680f322fce10ff
■EC2の基本設定
# localectl set-locale LANG=ja_JP.UTF-8
# timedatectl set-timezone Asia/Tokyo
■Node.jsやVue.jsをインストール
$ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash -
$ sudo yum install -y nodejs
$ node --version
v12.16.3
$ npm --version
6.14.4
$ sudo npm install -g @vue/cli
$ vue --version
@vue/cli 4.3.1
■プロジェクトを作成
$ cd
$ npx create-nuxt-app my-project
create-nuxt-app v2.15.0
Generating Nuxt.js project in my-project
Project name my-project
Project description My splendiferous Nuxt.js project
Author name
Choose programming language JavaScript
Choose the package manager Npm
Choose UI framework None
Choose custom server framework Express
Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
Choose test framework None
Choose rendering mode Universal (SSR)
Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
プロジェクトの作成が完了すると以下が表示される
successfully created project my-project
To get started:
cd my-project
npm run dev
To build & start for production:
cd my-project
npm run build
npm run start
■起動
プロジェクト作成時に表示された案内に従って起動できる
$ cd my-project
$ npm run build
$ nohup npm run start &
[1] 2900
$ curl http://localhost:3000
案内にあるように「npm run start」だけでも起動できるが、コンソールを終了させても停止しないようにバックグラウンドで起動するといい
ログはプロジェクト内の nohup.out に出力される
killで終了できる
$ kill 2900
プロセス番号が不明な場合、以下で調べる
$ ps aux | grep npm
Nuxt.jsアプリをSSRモードでさくらVPS(CentOS7)にデプロイする手順メモ｜ss_ishii｜note
https://note.com/ss_ishii/n/ncf6418e1bb68
SSH 接続先でサーバを立ち上げっぱなしにしてログアウトするための Bash の書き方 - Corredor
https://neos21.hatenablog.com/entry/2018/09/26/080000
■標準ログとエラーログ
以下のように起動すると、logs/access.log にアクセスログが、logs/error.log にエラーログが表示される
…ようだが、詳細な挙動は要検証
ログ用ディレクトリは、あらかじめ作成しておかないと起動できない
$ mkdir logs
$ nohup npm run start > logs/access.log 2> logs/error.log &
ディレクトリ名は何でもいいと思われるが、.gitignore に「/logs」という記述があるので logs という名前にしておくのが一般的かも
ログローテートもしくは日付ごとのファイルに保存できるかなどは検証したい
サーバメモの Command.txt にある「$ touch `date +%Y%m%d_%H-%M-%S`.txt」の応用で何とかなるか、もしくは他に専用の仕組みがあるか
nohup コマンドで任意の場所にログを出力する方法 - 約束の地
https://obel.hatenablog.jp/entry/20180208/1518054980
SSH 接続先でサーバを立ち上げっぱなしにしてログアウトするための Bash の書き方 - Corredor
https://neos21.hatenablog.com/entry/2018/09/26/080000
nohupで実行したコマンドの出力をnohup.out以外のファイルに保存する
https://kazmax.zpp.jp/linux/nohup_stdout.html
■外部からアクセス
プロジェクト作成時点では localhost からのみアクセスできる
外部から3000番ポートを指定してアクセスできるようにするためには、起動時の設定が必要（nginxを使うなら不要かも）
$ vi package.json
以下のようにアクセスできる。コンソールを終了させてもアクセスできることを確認する
http://203.0.113.1:3000/
Nuxt.js yarn start時に外部IPから接続できるように設定する | mebee
https://mebee.info/2019/12/02/post-4240/
■Nginxの導入
AmazonLinux2へNuxt.js導入手順 - Qiita
https://qiita.com/deehii/items/58e6da680f322fce10ff
nginx をリバースプロキシとして使う - NuxtJS
https://ja.nuxtjs.org/faq/nginx-proxy/
Nginxが挟まっていれば、package.json でのhost＆port設定が無くてもアクセスできる
Webサーバとして高性能なNginxを挟んでおく方が、後々運用しやすいと思われる
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3000"
}
}
$ nohup npm run start &
# amazon-linux-extras install nginx1.12 -y
# vi /etc/nginx/nginx.conf
以下のようにアクセスできる
http://203.0.113.1/ server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
#root /usr/share/nginx/html; … 公開ディレクトリをコメントアウト
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
proxy_pass http://localhost:3000; … ブロックに内容を追加
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# systemctl start nginx
# systemctl enable nginx