[super detailed! 】Vue + koa + nginx front and rear end separation development project was launched and deployed to the cloud server

Recently, I’ve been crazy by Vue + koa project, many pits!!! First introduce the deployment steps in detail, and then summarize a pit closing guide ~ after this period of time, we will make the project into a video course.

1. Project introduction

This project is a mobile phone mall project developed separately by Vue + KOA. First, paste the project directory. We mainly want to deploy dist and server

2. Pre deployment file processing

(1) Modify config/ index.js file

Change the path of assetspublicpath in build to./Otherwise, the generated dist file cannot load static files such as JS, CSS, IMG, etc

build: {
    //What needs to be modified
    assetsPublicPath: './',

(2) Modify the URL of the request back end

In the local project development, the back-end URL is generally used http://localhost :3000。 After deployment and online, you need to change this URL into a real domain name. I define it in SRC/ config.js In the file
The following port should follow the backend server/ app.js Listening port insideapp.listen(3000)agreement

//Parts to be modified
const host = 'http://yourdomain.com:3000'

const config = {
  host
}

export default config

(3) Run the project folder belownpm run build, generate dist folder

~/xbapp$ npm run build

The generated dist folder directory, we open dist locally/ index.html File, test whether the style can display normally

(4) Modify database information

If there is an operation database in the back end, the database name, database password and other information need to be changed

3. Upload project to cloud server

Git or SCP can be used to upload. I uploaded it to the directory / MNT / xbapp
There is a point to pay attention to when uploading GIT. The. Gitigonre file under the root directory of the project may ignore uploading the dist folder. We need to delete dist from the. Gitigonre file/

.DS_Store
Dist // / need to be deleted
npm-debug.log*
yarn-debug.log*
yarn-error.log*

Git programmers can, do not start to talk about, previously wrote git deployment project article, we can learn from
Project launch git deployment project

---

Now we will start to operate on the cloud server

---

4. Koa configuration and testing

(1) Install the koa plug-in

Koa needs the support of node environment. If the cloud server does not have a node environment, it needs to install node first
Node environment installation reference article

Next, we start installing the koa plug-in

#Open the server folder
cd /mnt/xbapp/server

#Delete node_ Modules folder and package- lock.json file
rm -r node_modules
rm package-lock.json

#Installing plug-ins
npm install

#Open project
npm run dev

npm installYou may report errors, such aslet notifier = require('update-notifier')({pkg})Most of the errors are caused by the low node version. You can update the node version. Refer to the article: upgrade the node version in Linux environment

(2) Testing

After running NPM run dev successfully, it does not mean that koa has been successfully configured. Enter the domain name + port opened by koa on the browser and return to koa2 successfully, which indicates that the backend has been deployed and OK

(3) Possible errors

Of course, before you can see the above effect successfully, you may encounter many errors. If NPM run dev succeeds, the domain name + port request still displays connection timeout
Here are some ideas for solving problems

• Ping the domain name to check whether it is a domain name problem

ping yourdomain.com

• It’s not the domain name problem. Check the port with telnet. If there is no problem with the domain name, the general problem lies in the port

telnet yourdomain.com 3000

There are many reasons for the port problems. You can only solve them according to your own situation. I use the alicloud server. The reason for the port request timeout is that port 3000 is not opened in the security group. Just add it.
Add port reference article: add authorized port in security group

5. Configure nginx

Nginx is a web proxy server that forwards browser requests to the server project
Generally, the installed nginx is in the / etc / nginx folder. Let’s take a look at the nginx.conf File, in which you can find these two statements, meaning that the configuration of nginx will refer to the file ending in. Conf under the / etc / nginx / conf.d/ folder and all the files under the / etc / nginx / sites enabled / folder

 include /etc/nginx/conf.d/*.conf;
 include /etc/nginx/sites-enabled/*;

Therefore, we can configure under these two folders. I am used to it in the conf.d folder

#Open the conf. D folder
cd /etc/nginx/conf.d

#Create a. Conf file
touch xbapp.conf

#Open the file you just created
vim xbapp.conf

stay xbapp.conf Paste the following code into the file,

upstream koa.server{
  server localhost:3000;
}

server {
  listen   80;
  server_ name  yourdomain.com ; ා change to your own domain name here
  Root / MNT / xbapp / dist; ා change to your own folder path, and the index page is under the dist folder, so it points to the dist folder
  location / {
    index  index.html index.htm;
  }
}

After configuration, enternginx -tCheck whether the nginx configuration is successful. If successful, the following two statements will be displayed

$ nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Restart nginx

service nginx restart

Now open the domain name and the project page will be displayed normally. Finally, we will install the PM2 process manager to help the koa back-end process open for a long time

6. Install PM2 and start the project

//Install PM2
~$ npm install pm2 --global

//Check whether the installation is successful
~$ pm2 -v

//Enter project directory
~$ cd /mnt/xbapp/server/

//Start project
/mnt/xbapp/server/$ pm2 start app.js
//Information returned after successful startup
[PM2] Starting /mnt/truth_hold/server/app.js in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬──────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status   │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼──────────┼──────────┼──────────┤
│ 0  │ app                │ fork     │ 0    │ online   │ 0%       │ 25.8mb   │
└────┴────────────────────┴──────────┴──────┴──────────┴──────────┴──────────┘

In this way, the Vue project is successfully deployed~~