Detailed description of pm2 configuration based on Vue + Koa, detailed description of vuekoapm2

Detailed description of pm2 configuration based on Vue + Koa, detailed description of vuekoapm2

Currently, we use the following technology stacks: front-end Vue, backend Koa, and database Mongodb.

However, every time a service is started, npm start, node./server/app. js are required. It is very troublesome to keep these two windows open at the same time.

And because I use koa, and I do not use the koa scaffolding written by Uncle wolf. It is a small mvc developed based on Mr. Liao Xuefeng's Koa framework. As a result, there is no hot update.

In order to simplify unnecessary operations and add hot updates, I began to think about how to optimize them. Therefore, pm2 is selected.

Configure pm2

First install pm2: npm I pm2, npm I pm2-g

Because it is an open-source project, pm2 needs to be included in the project to enable code to run on other computers. Then install the tool globally for later debugging.

Create the logs directory in the root directory of the project.

Create a pm2.json file in the current directory with the following content:

{ "apps": [{  "name": "koler-server",  "script": "./app.js",  "error_file"   : "../logs/server-err.log",  "out_file"    : "../logs/server-out.log",  "merge_logs"   : true,  "log_date_format" : "YYYY-MM-DD HH:mm Z",  "cwd": "./server",  "watch": [   "app.js",   "controllers"  ],  "watch_options": {   "followSymlinks": false  } },{  "name": "koler-app",  "script": "./build/dev-server.js",  "error_file"   : "./logs/app-err.log",  "out_file"    : "./logs/app-out.log",  "merge_logs"   : true,  "log_date_format" : "YYYY-MM-DD HH:mm Z",  "cwd": "./",  "ignore_watch" : [   "node_modules"  ],  "watch_options": {   "followSymlinks": false  } }]}

Start two projects at the same time.

The koler-server is koa, And the koler-app is the frontend vue.

I tried

"error_file"   : "./logs/app-err.log","out_file"    : "./logs/app-out.log","merge_logs"   : true,"log_date_format" : "YYYY-MM-DD HH:mm Z",

Code is promoted to the root of json, but it does not work. It seems that pm2 does not support this type. Therefore, it can only be written in each service.

Configure package. json

Replace dev in the previous script field, and then add the stop field. The replacement is as follows:

"scripts": { "dev": "pm2 start pm2.json && pm2 logs", "start": "npm run dev", "stop": "pm2 stop koler-app koler-server && pm2 delete koler-app koler-server", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src"},

Pm2 start pm2.json & pm2 logs is started based on the pm2.json file configuration. The pm2 logs is used to track the feedback logs of vue and koa at the same time.

Enter npm start. The terminal is as follows:

 

I don't know why. The following error is prompted every time npm start is started:

1|koler-ap | 2017-10-23 19:45 +08:00:1|koler-ap | ┌────────────────────────────────────────────────────────────┐1|koler-ap | │         npm update check failed          │1|koler-ap | │      Try running with sudo or get access       │1|koler-ap | │      to the local update config store via      │1|koler-ap | │ sudo chown -R $USER:$(id -gn $USER) C:\Users\158bl\.config │1|koler-ap | └────────────────────────────────────────────────────────────┘

It is okay to start the project independently, but the project can still run as usual. It may be a bug in nodejs or pm2 (because I don't know where the bug is, I won't mention issue on github)

After it is started, a cmd window will appear on your screen. You don't need to close it. It will close it later. Each time you modify the code to trigger the watch rule in the pm2 configuration file, a cmd window is automatically displayed, which will be closed later.

Because other project users may run multiple pm2 instances on their computers, I followed the name in the stop field. This prevents the temporary deletion of all instances.

Test

Now we have no problem with the code change, and pm2 will help us automatically perform hot updates. Now let's try to correct a piece of vue code:

 

It can be found that it is OK.

The following explains why the second instance koler-app in the pm2.json configuration file does not have a watch, because vue uses the watch of wenpack in the development environment, so it does not need to be added.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.