Build a development environment on AWS EC2 with CentOS7 + Nginx + pm2 + Nuxt.js

Build a development environment on AWS EC2 with CentOS7 + Nginx + pm2 + Nuxt.js

Introduction

Start-up companies do everything from the back end to the front end, but this time it's a development environment construction work!

I often stumbled, so I will leave it as a memo.

Development environment

Cloud: AWS EC2（t2.micro） OS: CentOS7 FW: Nuxt.js PM: pm2 Others: node.js, npm

setup

sudo yum update -y
sudo yum clean all

sudo yum install gcc-c++

sudo yum install nodejs npm
sudo npm install -g n

sudo n stable

sudo yum remove nodejs npm

sudo npm install -g nuxt
sudo npm install -g pm2

Creating a project

cd /var/www/html/
npx create-nuxt-app project name

create-nuxt-app v3.3.0
?  Generating Nuxt.js project in project name
? Project name:Project name
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Version control system: Git

cd project name

npm install
npm install --save @nuxtjs/axios
npm install --save @nuxtjs/dotenv

Edit package.json

{
=== Omitted ===
  "scripts": {
    "dev": "nuxt-ts --hostname server name,
    "build": "nuxt-ts build",
    "start": "nuxt-ts start --hostname server name",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "test": "jest"
  },
=== Omitted ===
}

Edit nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
=== Omitted ===
  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    "@nuxtjs/axios",
    '@nuxtjs/dotenv',
  ],
=== Omitted ===
  srcDir: "./",
}

npm run build

Nginx installation

See here

Install the latest version of Nginx stable on CentOS 7 (official repository)

Nginx settings

sudo vi /etc/nginx/conf.d/default.conf

upstream backend {
server server name:3000; #The server name is AWS EC2 Public IPv4 DNS
}

server {
    listen  80;
    listen  [::]:80;
    server_name server name; #The server name is AWS EC2 Public IPv4 DNS

    #charset koi8-r;
    charset utf-8;
    #access_log  /var/log/nginx/host.access.log  main;


    server_tokens off;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass  http://backend;
        #proxy_redirect http:// https://;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        proxy_pass  http://backend;
        #proxy_redirect http:// https://;
    }
}

How to use

Nginx restart

sudo systemctl restart nginx

Start pm2

pm2 start --name "Project name" "npm -- run dev" // development

pm2 start --name "Project name" "npm -- run start" // production

Other commands for pm2

pm2 reload "Project name"
pm2 restart "Project name"
pm2 stop "Project name"
pm2 status
pm2 kill

Startup screen

** Vuetify.js ** is selected for the UI framework

PC

Mobile

At the end

There was not much information and I built it by repeating try & error Nginx reverse proxy? I was addicted to the setting of lol I would like to know if there is a better way

that's all