VUE Development (b) Nginx vue achieved with front and rear ends deployed separately

I. INTRODUCTION

　　Since the local is the use of front and rear end of the separation project vue + spring boot realized, the machine starts when the first start after field service, and then start vue project separately, then you can achieve the whole process through, but we have to deploy to the time on the server, general We are playing a jar package to run on the server, and that the front page of Vue bad start to show up.

　　The traditional front-end and back-end service project to integrate the code, can be labeled as war package thrown on tomcat, the tomcat to run the whole project; but since we have adopted a policy of separation of the front and rear ends, and then deploy the realization deployed separately, then Would not it be flattered, change the front or back-end changes can be deployed alone, which is more convenient to manage our projects.

　　Separate front and rear ends of the deployment of the main principle is to use the function to achieve nginx reverse proxy files and static resources management, front-end request to nginx, nginx to allow cross-domain, and then call the back-end code, so that the front and rear end can be deployed in two separate the machine may be the deployment of a different port number on the machine.

Second, the project structure Introduction

Third, pre-deployment preparation

1, vue packaged into static files

## 1 , the vue packaged into static files directory
 npm run build

　　After successful execution, we can see which project more than a dist folder:

2, modify the access path static files

Fourth, upload static files and directories backcourt engineering jar package

　　There are many upload tools, not illustrated here, after uploading a custom file directory:

V. configuration nginx reverse proxy

## 1 , see the nginx configuration file [Note that after installation of nginx conf directory]
 vim /usr/local/nginx/conf/nginx.conf

　　After a good configuration, restart nginx

## . 1 , the CD sbin directory under the directory nginx installation
 CD / usr / local / nginx / sbin / 

## 2 , restart nginx
 . / Nginx -s reload