AmazonLinux2へNuxt.js導入手順

##この記事について

AWSで新規作成したAmazonLinux2インスタンスのWebサーバーでNuxt.jsアプリケーションを稼働させ、ブラウザから画面を表示するまでの手順です。
インスタンス作成やセキュリティグループの設定などAWS側の設定は割愛します。

---

##nodejsをインストールします

$ curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
$ sudo yum install -y nodejs
$ node --version
v8.16.0
$ npm --version
6.4.1

---

##vue-cliをインストールします

$ sudo npm install -g @vue/cli
$ vue --version
3.7.0

---

##Nuxt.jsアプリケーションを作成します

$ pwd
/home/ec2-user
$ npx create-nuxt-app my-project

---

今回は以下の設定でプロジェクトを作成しました

項目	設定値
Project name	my-project
Project description	初期値
Server framework	express
Features to install	PWA Support, Linter / Formatter, Prettier, Axios
UI framework	vuetity
Test framework	jest
Rending mode	Universal
Package manager	npm

---

##nginxをインストールします

$ sudo amazon-linux-extras install nginx1.12
$ nginx -v
nginx version: nginx/1.12.2

---

##nginxのルートをNextjsアプリケーションが稼働するローカルサーバーに設定します

$ sudo vi /etc/nginx/nginx.conf

---

proxy_passに http://localhost:3000; を設定する

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    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;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
  }

---

##nginxを起動します

$ sudo systemctl start nginx.service

---

##Nuxt.jsアプリケーションをビルドしローカルサーバーを起動します

$ pwd
/home/ec2-user/my-project
$ npm run build
$ npm run start

---

##ブラウザからアクセス
ブラウザからEC2のパブリックIPにアクセスします

Nuxt.jsアプリケーションのページが表示されました。

---

以上