AmazonLinux2에 Nuxt.js 배포 절차

이 기사에 대하여

AWS에서 새로 생성한 AmazonLinux2 인스턴스의 웹 서버에서 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

이번에는 다음 설정으로 프로젝트를 만들었습니다.


품목
설정값


프로젝트 이름
my-project

Project description
초기값

Server framework
익스프레스

Features to install
PWA Support, Linter/Formatter, Prettier, Axios

UI framework
vuetity

Test framework
jest

렌딩 모드
유니버셜

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 애플리케이션 페이지가 표시되었습니다.

이상