AmazonLinux2へNuxt.js導入手順

##この記事について

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

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

```sh
$ 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をインストールします

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

- - -
##Nuxt.jsアプリケーションを作成します
```sh
$ 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をインストールします

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

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

```sh
$ sudo vi /etc/nginx/nginx.conf
```

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

```diff

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を起動します

```sh
$ sudo systemctl start nginx.service
```

- - -
##Nuxt.jsアプリケーションをビルドしローカルサーバーを起動します
```sh
$ pwd
/home/ec2-user/my-project
$ npm run build
$ npm run start
```

<img width="443" alt="Screen Shot 2019-05-18 at 4.54.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418795/9bb689f6-ab05-e2d4-c99a-2091eb173e9b.png">

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

<img width="1440" alt="Screen Shot 2019-05-18 at 5.08.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418795/df82b4d8-7c9a-d0c7-03fb-bbbdd68da339.png">

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

- - -

以上