Erstellen Sie mit CentOS7 + Nginx + pm2 + Nuxt.js eine Entwicklungsumgebung auf AWS EC2

Einführung

In einem Startup-Unternehmen machen wir alles vom Backend bis zum Frontend, aber dieses Mal bauen wir eine Entwicklungsumgebung auf!

Ich bin oft gestolpert, deshalb werde ich es als Memo hinterlassen.

Entwicklungsumgebung

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

installieren

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

Ein Projekt erstellen

cd /var/www/html/
npx create-nuxt-Name des App-Projekts

create-nuxt-app v3.3.0
?  Generating Nuxt.js Projekt im Projektnamen
? Project name:Projektname
? 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-Projektname

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

Bearbeiten Sie package.json

{
=== Ausgelassen ===
  "scripts": {
    "dev": "nuxt-ts --Hostname Servername,
    "build": "nuxt-ts build",
    "start": "nuxt-ts start --Hostname Servername",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "test": "jest"
  },
=== Ausgelassen ===
}

Bearbeiten Sie nuxt.config.js

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

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

npm run build

Nginx-Installation

Siehe hier

Installieren Sie die neueste Version von Nginx Stable unter CentOS 7 (offizielles Repository)

Nginx-Einstellungen

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

upstream backend {
Server Servername:3000; #Der Servername lautet AWS EC2 Public IPv4 DNS
}

server {
    listen  80;
    listen  [::]:80;
    server_Name Servername; #Der Servername lautet 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://;
    }
}

Wie benutzt man

Starten Sie Nginx neu

sudo systemctl restart nginx

Starten Sie pm2

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

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

Andere Befehle für pm2

pm2 reload "Projektname"
pm2 restart "Projektname"
pm2 stop "Projektname"
pm2 status
pm2 kill

Startbildschirm

** Vuetify.js ** ist für das UI-Framework ausgewählt

Mobile

Am Ende

Es gab nicht viele Informationen und ich habe sie durch Wiederholen von try & error erstellt Nginx Reverse Proxy? Ich war süchtig nach der Einstellung von lol Ich würde gerne wissen, ob es einen besseren Weg gibt

das ist alles