nginx deploys vue project online

1. Install nginx

Installing nginx is actually very simple. Common problem 1: If the server you bought reports an error using the apt-get command, then first enter the apt-get install update  command and update it. Regarding the installation of nginx, I recommend this blog post. I found a lot of articles for the first installation before, and this article is very good: nginx installation

2. The front end is online

Written in the front, it is recommended that you install MobaXterm, click here to go to the official website to download .

Just download the free version. This software is very easy to use, and uploading files is very convenient. If you want to transfer the front-end and back-end files to the server, this file can be easily done.

Establish a connection with the server:

Click the red box in the figure below in turn, enter the server IP address to connect successfully, and enter the user root and server password.

 

Deploy the frontend:

 Run npm run build on the vue terminal of the project to package the project, and then upload it to the server.

After decompression, enter the conf folder under the nginx installation directory as shown in the figure, and copy the nginx.conf file, which I named demo.conf here, enter the file, and modify the information as shown in the figure below.

Change the path after root to the path of the front-end project you passed to the server.

Common problem 2: When you have deployed both front-end and back-end projects, the first time you enter the page, the project is displayed normally. If you refresh the page and the page reports a 404 error, add  try_files $uri $uri/ /index.html; It can be solved perfectly.

 

Run the front-end project:

 Press the following command to run the project. If you want to stop the project, add -s stop after the third command.

But the command I usually use is  fuser -k 80/tcp, which can close the process of port 80.

 3. The backend goes online

Note: Before deploying the front-end to the server, it is necessary to replace the request addresses of get and post in the front-end with the IP address of the server, otherwise the data cannot be requested after the deployment goes online.

 Preparations before the backend goes online:

1. Install the database: install Mysql

2. After installation, export the local database as a sql file and send it to the server. How to export the database:  Export the database

3. Then perform the following operations in sequence:

1) 登录mysql:mysql -u root -p 

2) Create a database with the same name as the local database: create database 'name';

3) Use the database:  use 'name';

4) Import the .sql file just passed in: source 'path of sql file';

So far, all preparations have been completed.

Frequently Asked Question 3: Someone may change the host of the code connecting to the database to the IP address of the server after transferring the backend to the server. Do not change it. Just keep 127.0.0.1.

run backend

Just like running the backend in vue, you can directly download node app.js. Of course, download nodeJs in advance. This is very simple. You can check how to download it.

So far, the project has been launched successfully.

4. Optimization

If you directly run node app.js, you cannot exit this command. Once you exit the backend, it will not take effect, but we cannot just keep the computer on and let the node app.js command run all the time.

pm2 is used to solve this problem. We can use pm2 to mount the backend all the time, so that the project is always running even if we turn off the computer.

Download pm2: npm i pm2 -g

Start the project: pm2 start 'app.js address' --name 'alias'

View running projects: pm2 ls

Stop the project: pm2 restart 'The alias just given to the project'

Delete the project: pm2 delete 'the alias just given to the project'

As shown in the picture, this is the backend I mounted. If the status is online, it means it is running. The first red box is the alias just created. 

Now everything is done, the first time will be very cumbersome, you need to download a lot of things, and you may encounter many mistakes, but after the first deployment is successful, it will only take a few minutes to deploy after getting familiar with it.

Guess you like

Origin blog.csdn.net/huiaixing/article/details/124771531