The introduction

❝

Because the single page development of Vue is not conducive to SEO, sometimes to do some SEO projects, we need to use server-side rendering, so that the search engine can crawl to the information of the website, display the search content. Vue official server rendering documents can build a server to achieve server rendering. Since I’m lazy, I use the current mainstream library, Nust. Js. Please refer to the official website documentation for specific usage and API. Let me share some of the configuration for deployment after the project is complete.

❞

Project deployment

The nuxt.js website introduces three deployment modes, namely server-side rendering application deployment, static application deployment and single page application deployment (SPA). I need to use server-side rendering application deployment. Following the documentation, I put the entire project on the server, installed the dependencies through NPM Install, first executing NPM run build, then NPM run start. Ok, start successfully, visit, you can see the page, function is normal, but always feel not quite right, how can I directly put all projects in? And now listen to the port number, shut down the server will turn off the service.

Start the project using PM2

Can’t, go to checked the Google, behind know in fact as long as after local build. Nuxt, static, package. Json, nuxt. Config. Js this four files packaged into the server, and then the server installation depend on the package. Nuxt projects can also be started using PM2, install PM2: NPM install pm2 -g, set up the soft connection

ln -s /usr/local/node/bin/pm2 /use/local/bin/pm2
Copy the code

Run pm2 start NPM –name “demo” — run start, where name is the identifier of the started project, run pm2 list to view the currently running project. Now close the server window and the project is also started. However, projects are accessed by domain name, which is port 80 by default, using nginx reverse proxy.

Use Nginx to implement reverse proxy

For Nginx installation, refer to the installation tutorial. After the installation is complete, add the following to nginx.conf

upstream hangjia {
Server 119.23.173.182:8000;# the listening address for the project to start
} 

location ^~/ {
 proxy_pass_header Server;  proxy_set_header Host $http_host;  proxy_set_header X-Real-IP $remote_addr;  proxy_set_header X-Scheme $scheme;  proxy_pass http://hangjia/;  } Copy the code

Refer to the pictures below! []After the configuration is complete, restart nginx, directly access the domain name, you can proxy to the project address. Nginx can not access static resources in the directory

#manage is a static resource folder in nginx
 location /manage {
 autoindex on; 
    }
Copy the code

With this configuration, static resources are also accessible, and the NUXT project is ready to go live.

conclusion

All the problems encountered are found through Google solutions, in this is just a simple summary, but also convenient to forget to come back to check, if there are supplements or some places written wrong, please leave a message in the comment section, thank you!