部署前修改
前端
src\utils\request.js文件开头找到如下代码：
//创建axios实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? '': 'http://localhost:8080',
withCredentials: true
})
在baseURL空着的单引号中填入自己的服务器后端ip和端口。例如：
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? 'http://62.234.27.69:8080': 'http://localhost:8080',
withCredentials: true
})
这里的意义是：打包构建后，处于production环境，项目访问后端接口的基地址是http://62.234.27.69:8080
后端
跨域访问限制修改
找到如下文件：src\main\java\com\example\hotel\config\CORSConfig.java。
package com.example.hotel.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CORSConfig {
private static String[] originsVal = new String[]{
"localhost:8000",
"127.0.0.1:8000",
"127.0.0.1",
"localhost",
"172.19.144.143",
"172.19.144.143:8000",
// 跨域！
"62.234.27.69:8000"
};
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
addAllowedOrigins(corsConfiguration); // 1
corsConfiguration.addAllowedHeader("*"); // 2
corsConfiguration.addAllowedMethod("*"); // 3
corsConfiguration.setAllowCredentials(true); // 跨域session共享
source.registerCorsConfiguration("/**", corsConfiguration); // 4
return new CorsFilter(source);
}
private void addAllowedOrigins(CorsConfiguration corsConfiguration) {
for (String origin : originsVal) {
corsConfiguration.addAllowedOrigin("http://" + origin);
corsConfiguration.addAllowedOrigin("https://" + origin);
}
}
}
这是一个跨域请求的过滤器。当前后端分离部署时，出于安全考虑，应当限制跨域请求，只允许来自自己部署的前端处的跨域请求。可以看出，originsVal字符串数组就是允许的跨域来源，在这里加入自己将要部署的前端服务器的ip和端口。
数据库连接配置
数据库连接配置是可选项。因为所有的SpringBoot配置文件里的配置项，都可以在运行jar包时加参数覆盖。
这里可以选择将src\main\resources\application.yml配置文件中的数据库配置改为自己的数据库地址。如果不改，运行的时候也可以用参数重新指定。
打包
前端
命令行npm run build。会在项目根目录下生成一个dist目录，这些就是所有前端的资源了。
后端
首先将无关的目录和文件设置为excluded。
使用maven进行package。在idea里如图所示：
之后会在项目根目录的target目录下生成一个可执行的jar包。
上传
将刚才打包生成的文件上传到服务器上，可以参考如下的目录结构存放。
.
|-- backend
| |-- Dockerfile
| `-- hotel-0.0.1-SNAPSHOT.jar 后端jar包
|-- database
| `-- hotel.sql 数据库初始化文件
`-- frontend
|-- dist 前端项目目录
| |-- css
| |-- favicon.ico
| |-- img
| |-- index.html
| `-- js
`-- Dockerfile
数据库部署
docker run --name database -e MYSQL_ROOT_PASSWORD=123456 -d mysqldatabase换成任意的名字，123456可以换成你想要的root密码。
进入刚才项目部署的database目录下，执行docker cp hotel.sql <容器id>:/root/，把初始化数据库用的sql文件拷贝到容器中的/root/下。
docker exec -it <容器id> bash进入容器。然后执行mysql -uroot -p123456 -e "create database test;"创建数据库，之后执行mysql -uroot -p123456 -Dhotel < /root/hotel.sql在hotel数据库中执行sql初始化文件，把数据库初始化好。
键入exit退出容器。
在物理机的终端docker inspect <mysql容器id>查看并记录一下ip地址，我这里是172.17.0.5，一会儿后端可以用的到。
后端部署
在后端的目录中新建Dockerfile，写入（你可能需要修改一些内容）：
# 可以使用我事先建好的基础jdk镜像（基于alpine的jdk1.8环境）
FROM registry.cn-hangzhou.aliyuncs.com/claws/alpine_jdk:1.0
# 作者信息
MAINTAINER claws<lzl022@foxmail.com>
# 暴露端口
EXPOSE 8080
# 拷贝jar包
ADD hotel-0.0.1-SNAPSHOT.jar /root/backend.jar
# 实例化容器时运行jar包
CMD java -jar /root/backend.jar
然后docker build -t backend .构建镜像（需要在后端的目录内执行）。
之后docker run -d -p 8080:8080 backend运行镜像。如果配置文件中的数据库配置和实际的不符合，可以指定参数进行覆盖，例如：docker run -d -p 8080:8080 backend java -jar /root/backend.jar --spring.datasource.url=jdbc:mysql://172.17.0.5:3306/hotel?serverTimezone=CTT&characterEncoding=UTF-8。同样的，可以使用参数指定数据库的用户名和密码。
前端部署
进入前端目录，新建Dockerfile，写入：
FROM nginx
COPY dist/ /usr/share/nginx/html
保存后退出，执行docker build -t frontend .构建镜像。
执行docker run -d -p 8000:80 frontend，运行容器。
使用curl localhost:8000测试容器运行是否正常。
