Amazon EC2 で Nuxt.js 環境を構築する方法
Amazon EC2（Amazon Linux 2）に Nginx と Nuxt.js の環境を構築する手順を解説します。
はじめに
Amazon EC2 に Nuxt.js 環境を構築する手順を解説します。
環境
- Amazon Linux 2 AMI (HVM), SSD Volume Type（無料枠）
Nginx のインストール
サーバーアプリケーションとして Nginx をインストールします。
インストール手順
# amazon-linux-extras で nginx を有効化
sudo amazon-linux-extras enable nginx1
# nginx をインストール
sudo yum -y install nginx
# nginx を起動
sudo systemctl start nginx.service
# OS 再起動時に自動起動する設定
sudo systemctl enable nginx
セキュリティグループの設定
AWS コンソールでセキュリティグループの HTTP（ポート 80）を許可します。
設定が正しければ、EC2 のパブリック IP にアクセスすると Nginx のデフォルトページが表示されます。
Git のインストール
Nuxt.js プロジェクトをサーバーに配置するため、Git をインストールします。
# yum を最新の状態に更新
sudo yum update
# git をインストール
sudo yum install git
# インストール確認
git version
nvm（Node.js）のインストール
Node.js のバージョン管理ツール nvm をインストールします。
# システムを更新
sudo yum update
# nvm をクローン
git clone https://github.com/creationix/nvm.git ~/.nvm
# nvm を読み込み
source ~/.nvm/nvm.sh
パスの永続化
ログアウト後も nvm を使用できるよう、.bash_profile に設定を追加します。
vi ~/.bash_profile
以下を追記します:
# nvm
if [[ -s ~/.nvm/nvm.sh ]] ; then
source ~/.nvm/nvm.sh ;
fi
Node.js のインストール
# インストール可能なバージョン一覧を表示
nvm ls-remote
# Node.js をインストール（バージョンは適宜変更）
nvm install v14.10.1
Nginx の設定
Nginx をリバースプロキシとして設定し、Nuxt.js アプリケーション（ポート 3000）に転送します。
sudo vi /etc/nginx/nginx.conf
location / ブロックを以下のように編集します:
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;
}
設定を反映するため Nginx を再起動します:
sudo systemctl restart nginx.service
Nuxt.js プロジェクトの配置
作成済みの Nuxt.js プロジェクトをサーバーに配置します。
# ホームディレクトリに移動
cd /home/ec2-user/
# プロジェクトをクローン
git clone <リポジトリURL> nuxt-project
# プロジェクトディレクトリに移動
cd nuxt-project
# 依存関係をインストール
npm install
# アプリケーションを起動
npm run start
まとめ
EC2 のパブリック IP にアクセスすると、Nuxt.js アプリケーションが表示されます。
本番環境では PM2 などのプロセスマネージャーを使用して、アプリケーションをバックグラウンドで実行することをお勧めします。