Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

AmazonLinux2へNuxt.js導入手順

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アプリケーションのページが表示されました。


以上

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
19
Help us understand the problem. What are the problem?