Some time ago, a friend asked me, how to deploy front-end and back-end packaging? Tell him directly at that time, and write it down after thinking about it later, so that you can directly give it to the friends who need it in the future.
No nonsense, just go straight to work!
Front-end and back-end packaging can be divided into: front-end and back-end separate deployment, and front-end and back-end integration into one package deployment. Let's talk about these two ways respectively:
1. Nginx deployment, front and back ends are deployed separately
1.1. Package the front-end project
In the ideal Terminal, use the command: npm run build. After packaging, a dist folder will be formed.
1.2, packaging back-end code
Find [Gradle] or [maven] on the right sidebar of ideal to package the back-end project. The packaged jar package is under target
1.3. Upload front-end and back-end packages
Create a folder in linux, such as: server. It is used to save the front-end and back-end packages, and upload the packaged front-end files.
**例如：在/usr/local/server创建了server文件夹。**
复制代码
1.4, start the back-end jar package
java -jar xxx.jarstart project backend project
1.5. Configure nginx
Find nginx.conf and configure the reverse proxy of the service.
Note: proxy_pass dynamic proxy backend service address, if it is local, configure localhost directly, the name (api) in the proxy needs to be consistent with the front-end public url address name, otherwise an error will be reported
1.6. Start nginx for access
2. The front and back end synthesize a package deployment
2.1 Package the front end
Front-end packaging can be packaged through vue ui or direct commands
2.2.1 vue ui package
Run in the front-end project vue uiand enter the vuejs page
Select [task] -> select [build] to enter the packaging page.
Select [Parameter] to select the environment and packaging path
Note: The output path is under the static directory in the backend project, and the file name is determined by the one in the frontend
module.exportsprojectpublicPath.
Click [Run] to wait for the packaging process
2.2.2 Command npm run build to package
Run the command in the front-end project npm run buildto generate the dist package
Create a folder name (same as publicPath) in the static of the back-end program, and then copy the files in the front-end dist folder to the folder created by the back-end.
For example, the created manage folder
2.2 The backend is directly packaged into a jar package
maven or gradle packaging
2.3 Run the jar package on the server
2.4 Accessing Services
The server needs to develop ports or close the firewall
The above is the process of front-end and back-end deployment, and it is just the simplest way. If it is a test environment, etc., you can use tools such as jekins to deploy, so that you don't need to package it manually.
Well, I will share this today, I hope it will be helpful to everyone.
Author: Little Fat Boy Who Steals His Wife’s Yogurt
Link: https://juejin.cn/post/7231354462685265977
Source: Rare Earth Nuggets
Copyright belongs to the author. For commercial reprint, please contact the author for authorization, for non-commercial reprint, please indicate the source.