Nuxt - Project packaging deployment and online to server process (SSR server rendering)

Preface

Most of the Internet is about Nuxt Packaging deployment tutorials can really be described in various ways , This is simply impossible for a friend who comes into contact for the first time .

This article will describe in as much detail as possible , The complete process of packaging, deployment and launching to the server .

preparation

It is strongly recommended that you open Official documents , Compare with this tutorial , This will help you better understand .

You need to know something about Nuxt Commands and their functions ：

Overall process

You need to use nuxt build Order to package the project , After the command is executed successfully , Within the project .nuxt、static、package.json、nuxt.config.js this 4 Copy it out and put it in a folder , Upload to server . then On the server （ The subsequent operations are all on the server ） Open this directory , perform npm install Installation dependency , After successful installation, execute npm start Start command , This completes the startup project on the server , The console will get a local domain name （localhost / 127.xxx）. Then you need to install on the server PM2 Process daemons , Guard the local domain name obtained by the console just now （localhost / 127.xxx）, This will ensure that the local domain name will not hang up even if the terminal is closed . Finally , You also need to use Nginx To monitor and forward this local domain name with the proxy （localhost / 127.xxx）, In this way, it can be on the Internet （ user ） Can also visit .

Simply divide , That's the following 3 Block content ：

1. Nuxt.js The packaging of the project .
2. PM2 Process daemons , Guarantee node The service process doesn't hang up .
3. Nginx Reverse proxy , Provide forwarding Internet access .

First step

Be careful ： In order to let you see more clearly , The following example cuts out most of the eye-catching configurations , Please copy and paste reasonably for reference .

Before we start , You need to check whether the cross domain configuration is correct ,

open nuxt.config.js , I have prepared one for you “ standard ” Request and cross domain configuration example ,

//  Except to modify 【 Address of the interface 】, There is no need to move any other configuration ！
//  Except to modify 【 Address of the interface 】, There is no need to move any other configuration ！
//  Except to modify 【 Address of the interface 】, There is no need to move any other configuration ！
export default {
    

  //  See : https://wangjiabin.blog.csdn.net/article/details/125673201
  modules: [
    '@nuxtjs/axios',// Request Library 
    '@nuxtjs/proxy'// Proxy plug-in 
  ],

  axios: {
    
     proxyHeaders: false,
     credentials: false,
     prefix: '/api',
     proxy: true,//  Open agent 
  },

  proxy: {
    
	   '/api': {
    
	   	 //  Fill in your interface address !!!
	     target: 'http://xxx.com',// Back end address to proxy ( important )
	     pathRewrite: {
    
	       '^/api' : ''
	     },
	     changeOrigin: true
	   }
  },
  
  //  This configuration should be written 
  server: {
    
    port: 8001,// This one needs to be customized , Otherwise, there must be port conflicts among multiple ports 
    host: '0.0.0.0', //  Be careful ： There's a pit here ,host  It's written in 127.0.0.1  cannot access 
  }
}

The second step

First, let's do the front-end work , You need to Nuxt.js Package the project .

Open the project root , Execute the following command （ As long as you don't report mistakes, you will be successful ）：

npm run build

then , You build a nuxt Folder , Add the following 4 Copy files into it ：

Final folder contents ：

Come here , It's done. Nuxt The packaging of the project , Next, upload this folder to the server .

The third step （ Server operation ）

Be careful ： You should ensure that the server has been configured node.js Environment and common configurations , Otherwise you need to do these things first .

Pack the product just now （4 individual ） Put it on the server , The server terminal executes the following installation commands ：

npm install

After installing dependency , Then execute the following startup command ：

npm start

After successful startup , The effect shown in the following figure will appear （ If it is Localhost View First step ）：

Come here , The front end is a success , Prove that your project is running normally without error .

Then the page can run normally , Enter your server's ip Address and port just configured ip:port You can visit the page . But this time , Our project operation depends on the terminal , The terminal cannot be closed , So we use pm2 Daemon .

From here on , In fact, the subsequent steps should be completed by the backend or operation and maintenance ！

Step four （ Server operation ）

The project is running successfully on the server , However, it cannot guarantee the continuous operation and stability of the shutdown terminal , Process daemon is required .

Next install PM2 Process daemons , Those who don't understand can go to Baidu without introducing ,

Execute the following global installation command on the server ：

npm install pm2 -g	

Check if the installation is successful ：

pm2 -v

Here are some common pm2 command ：

open 4 Of files package.json, To configure a pm2 command ：

pm2 start yarn --interpreter bash --name oitboy-front -- start

This command is to execute Process daemons , Execute it ：

npm run pm2

Finally through pm2 list Check whether the suspension is successful ,status Field shows online That is, the suspension is successful ：

┌─────┬──────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name         │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │  Your project name     │ default     │ N/A     │ fork    │ 1190     │ 0s     │ 0    │ online    │ 0%       │ 7.8mb    │ den… │ disabled │
└─────┴──────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

failed ？ Please refer to This chapter Give it a try .

Step five （ Server operation ）

The project is finished , There are also process guardians , In the end, it's bad to use Nginx Forward it .

The first is installation , Please refer to Installation tutorial , Many self search on the Internet .

nginx It will load on startup /etc/nginx/conf.d/ Configuration below , We only need to configure our own configuration under this folder ,

Create your own configuration ：

vim /etc/nginx/conf.d/myapp.conf

The configuration is as follows ：

upstream nodenuxt {
    server 127.0.0.1:3001; #nuxt project   Listening port 
    keepalive 64;
}
server {
    listen 80;
    server_name oitboy.com;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://nodenuxt; # Reverse proxy 
    }
}

And then restart Nginx：

nginx -s reload

At this point, you can enter your domain name to access your project （ Of course, you have to resolve the domain name to your server in advance ）.

failed ？ Please refer to This chapter Give it a try .

Other reference

If you have problems , You can also refer to the following excellent tutorials ：

• https://juejin.cn/post/6994328133092507679
• https://juejin.cn/post/6844903666701320205
• https://juejin.cn/post/6844904186979565581

SEO

Nuxt - The process of project packaging, deployment and launching to the server , Detailed introduction Nuxt Project online deployment , Server rendering (ssr) Project and nuxt Project deployment process ,nuxt Package the project online ,Nuxt Project deployment tutorial ,NuxtJS Project deployment plan ,Nuxt How to deploy to online ,nuxt Project deployment ,Nuxt Project construction to Nuxt Project deployment ,Nuxt Project from start to deployment , Detailed tutorial . Server deployment nuxt project ,nuxt The server deployment goes online , Deploy... On the server nuxt project ,NuxtJS project —— Command and deployment .