A project deployment scheme based on SpringBoot + VUE after front-end and back-end separation

In the traditional model, project deployment can only be the business of the back-end developer and has little to do with the front-end developer. When the front and back ends are separated, they may change a little bit.

Common deployment schemes are as follows:

First, the front and back ends are deployed together. The front end is packaged into a static file, copied to the back-end project, and then the back-end project is deployed.

The front end is deployed using Nginx, the back end is run separately, and then the nginx reverse proxy is used.

Third, the front and back ends are deployed separately, the front end is thrown in the CDN, and the back end is run separately.

This paper focuses on scheme 1 and Scheme 2, with qualification: routing mode -history

Deployment principles:

If the file corresponding to the access path exists, the corresponding file is returned.
If the file corresponding to the access path does not exist, index.html is returned

Deployment Solution 1 (SpringBoot + VUE)

The procedure for adding a back-end controller is as follows:

// Use the template engine thymeleaf (of course, other template engines will do)
@Controller
public class IndexController {
	@GetMapping("/ui/**") // All/UI /** returns the index.html page
	public ModelAndView ui(a) {
		return new ModelAndView("/index.html");
	}
	@GetMapping("/") // Access the root directory to forward to the request above
	public ModelAndView index(a) {
		return new ModelAndView("forward:ui"); }}Copy the code

Note: the/UI/is used to distinguish the front-end route from the base of the front-end route.

Front-end routing files are processed as follows:

const router = new VueRouter({
  base:"/ui/".// This configuration must be consistent with that of the control layer
  mode:'history'.routes: [{path:'/'.name:'home'.component: (a)= > import('@/views/home.vue')}, {path:'/about'.name:'about'.component: (a)= > import('@/views/about.vue')}]Copy the code

Deployment process

Package the front-end project and generate files in the dist directory
Packaged front-end dist / * * all files (except index. HTML) is copied to the SRC/main/resources/static directory (springboot static file directory)
Packaged front-end dist/index. The HTML file is copied to the SRC/main/resources/templates (template engine template root directory)
Maven packages generate JAR packages

release

A Maven package is recommended here

 <! -- Resource plugin for copying packaged files from front-end projects to Springboot projects -->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy static</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/static</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <! -- Because vue-cli package directory is in the root directory of the project, so copy from here -->
                                    <directory>/java_projects/${project.artifactId}/dist</directory>
                                    <includes>
                                        <include>css/</include>
                                        <include>img/</include>
                                        <include>fonts/</include>
                                        <include>js/</include>
                                        <include>favicon.ico</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                    <execution>
                        <id>copy template</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/templates</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <! -- Because vue-cli package directory is in the root directory of the project, so copy from here -->
                                    <directory>/java_projects/${project.artifactId}/dist</directory>
                                    <includes>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
Copy the code

Deployment Solution 2 (Nginx + SpringBoot + Vue)

Nginx configuration is as follows:

server {
        listen       80;
        server_name  localhost;
        root /java_projects/project_name/dist; # Front-end package directory
        location / {
            try_files $uri $uri/ @router; If the file does not exist, it is handled by @router
            index index.html;
        }
        location @router {
            rewrite^. * $ /index.html last; # all requests, return index.html
        }
        location /api { In order to access unified processing, the front end also needs to be modified
            rewrite /api/(.*) /The $1 break; # rewrite request (no/API stops on the back end)
            proxy_pass http://127.0.0.1:18080; Interface address}}Copy the code

Or I don’t rewrite the url plus /

server {
        listen       80;
        server_name  localhost;
        root /java_projects/project_name/dist; # Front-end package directory
        location / {
            try_files $uri $uri/ @router; If the file does not exist, it is handled by @router
            index index.html;
        }
        location @router {
            rewrite^. * $ /index.html last; # all requests, return index.html
        }
        location /api/ { In order to access unified processing, the front end also needs to be modified
            proxy_pass http://127.0.0.1:18080/; Interface address}}Copy the code

Front-end modifications are as follows:

axios.defaults.baseURL='/api'; // This configuration is consistent with nginx configuration
Copy the code

A project deployment scheme based on SpringBoot + VUE after front-end and back-end separation