Créez un environnement de développement sur AWS EC2 avec CentOS7 + Nginx + pm2 + Nuxt.js

Créez un environnement de développement sur AWS EC2 avec CentOS7 + Nginx + pm2 + Nuxt.js

introduction

Dans une start-up, nous faisons tout du back-end au front-end, mais cette fois, nous construisons un environnement de développement!

J'ai souvent trébuché, donc je vais le laisser comme mémo.

Environnement de développement

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

installer

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

Créer un projet

cd /var/www/html/
npx create-nuxt-nom du projet d'application

create-nuxt-app v3.3.0
?  Generating Nuxt.projet js dans le nom du projet
? Project name:Nom du projet
? 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

nom du projet cd

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

Modifier package.json

{
=== Omis ===
  "scripts": {
    "dev": "nuxt-ts --nom d'hôte Nom du serveur,
    "build": "nuxt-ts build",
    "start": "nuxt-ts start --nom d'hôte Nom du serveur",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "test": "jest"
  },
=== Omis ===
}

Modifier nuxt.config.js

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

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

npm run build

Installation de Nginx

Vois ici

Installez la dernière version de Nginx stable sur CentOS 7 (référentiel officiel)

Paramètres Nginx

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

upstream backend {
nom du serveur serveur:3000; #Le nom du serveur est DNS IPv4 public AWS EC2
}

server {
    listen  80;
    listen  [::]:80;
    server_nom du serveur de noms; #Le nom du serveur est DNS IPv4 public AWS EC2

    #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://;
    }
}

Comment utiliser

Redémarrez Nginx

sudo systemctl restart nginx

Début pm2

pm2 start --name "Nom du projet" "npm -- run dev" // development

pm2 start --name "Nom du projet" "npm -- run start" // production

Autres commandes pour pm2

pm2 reload "Nom du projet"
pm2 restart "Nom du projet"
pm2 stop "Nom du projet"
pm2 status
pm2 kill

Écran de démarrage

** Vuetify.js ** est sélectionné pour le framework d'interface utilisateur

PC

Mobile

À la fin

Il n'y avait pas beaucoup d'informations et je l'ai construit en répétant try & error Proxy inverse Nginx? J'étais accro au décor de lol J'aimerais savoir s'il y a une meilleure façon

c'est tout