Deploy nuXT SSR server rendering application

My server is centos 7. The following steps use my server as an example

Step 1: Install node

I use manual installation, their own good control, good control version. First go to the node version and download it from the portal: nodejs.org/dist

Find the corresponding node version and download it

Wget HTTP: / / https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.gzCopy the code

After the download is complete, decompress the installation:

The tar - ZXVF node - v14.16.0 - Linux - x64. Tar. GzCopy the code

Move to usr/local/nodejs

Node - mv v14.16.0 - Linux - x64 / usr/local/nodejsCopy the code

Add environment variables to the /etc/profile file. For other servers, check how to Configure environment variables

vim /etc/profile

export NODEJS_HOME=/usr/local/nodejs
export PATH=${NODEJS_HOME}/bin:${PATH}

. /etc/profile
Copy the code

Run node -v to check whether the installation is successful

Step 2: Install YARN. You can also use NPM

Direct script installation

curl -o- -L https://yarnpkg.com/install.sh | bash
Copy the code

Configure Ali Cloud Taobao image

yarn config set registry https://registry.npm.taobao.org
Copy the code

Run yarn -v to check whether the installation is successful

Step 3: Package the project and upload it to the server

1. Modifypackage.jsonPackage command, we must have custom port for each project, otherwise multiple projects must have port conflict,configInside is the port on which the server will run

Note: there is a pit here, host written 127.0.0.1 is not accessible

Run the packaging command locally

yarn build
Copy the code

After the packaging, will be. Nuxt, static, nuxt. Config. Js, package. The json to the server

Step 4: Install the dependencies in the package on the service

CD to your file directory, install the dependencies, and run yarn to install the dependencies

yarn
Copy the code

Then enter yarn start to start the service.

yarn start
Copy the code

Enter the IP address of your server and the port IP :port to access the page. At this point, however, our project is running on a terminal and cannot be shut down, so we will use the pm2 daemon.

Step 5: Configure the PM2 daemon

Install the PM2 first

npm install -g pm2
Copy the code

Check whether the installation is successful

pm2 -v
Copy the code

Some common Pm2 commands are listed here

Pm2 daemon process

pm2 list 
Copy the code

Stopping daemons

pm2 stop app_name 
Copy the code

Deleting a daemon

pm2 delete app_name 
Copy the code

Open the project’s package.json file and configure a pm2 command

pm2 start yarn --interpreter bash --name oitboy-front -- start
Copy the code

Then upload it to the server and execute the command

yarn pm2
Copy the code

Pm2 is now daemon for us!

Ps: Upload service can be configured with another push command

yarn build && rm -rf myblog-front-app && mkdir myblog-front-app && cp -r .nuxt/ myblog-front-app/.nuxt && cp -r static/ myblog-front-app/static && cp package.json myblog-front-app && cp nuxt.config.js myblog-front-app && scp -r Myblog-front-app root@Server address :/home/vue/Copy the code

The entire operation looks something like this:

  1. Package compiled
  2. Cached files before deleting them locallymyblog-front-app
  3. Create one for the current foldermyblog-front-appStores the files to be uploaded
  4. copy.nuxtFolder all files tomyblog-front-app/.nuxt
  5. copystaticFile under all files tomyblog-front-app/static
  6. copypackage.json 到myblog-front-app/
  7. copynuxt.config.js 到myblog-front-app/
  8. Upload the localmyblog-front-appAll files to remote address/home/vue/

Then each time we package and upload, we can directly yarn push and input the server password

Step 6: Configure the Nginx reverse proxy

First of all, install Nginx. There are many tutorials on the Internet, but I won’t mention them here.

/etc/nginx/conf.d/ is loaded when nginx starts. We only need to configure our own configuration separately in this folder

Create your own configuration

vim /etc/nginx/conf.d/myapp.conf
Copy the code

The configuration is as follows:

Upstream nodenuxt {server 127.0.0.1:3001; # Nuxt project listens on 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}}Copy the code

Then restart Nginx

nginx -s reload
Copy the code

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).