Help us understand the problem. What is going on with this article?

AmazonLinux2へNuxt.js導入手順

More than 1 year has passed since last update.

AmazonLinux2へNuxt.js導入手順

by deehii
1 / 13

この記事について

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

Screen Shot 2019-05-18 at 4.54.14.png


ブラウザからアクセス

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

Screen Shot 2019-05-18 at 5.08.21.png

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


以上

deehii
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした