【部署上线，跨域】

法一：宝塔Linux部署

下载Nginx

将前端项目和后端项目在本地打包
后端本地打包，打包成功会生成.jar包

前端直接在Webstorm下面的终端中执行npm run build,等控制台执行完即可。此时你就会发现项目中多了个dist目录

将本地打包的文件上传至网站的根目录下

后端jar包存于user.canso.top,前端dist存于www.canso.top

开放端口
宝塔面板 -> 安全 -> 系统防火墙
云服务器 -> 防火墙 -> 添加规则

跨域问题
1.网关支持（Nginx）

location /api {
      proxy_pass http://127.0.0.1:8080;  //反向代理
      add_header 'Access-Control-Allow-Origin' $http_origin;
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers '*';
      if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers'
        'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
      }
    }

法二：Docker部署

Docker安装 https://www.docker.com/get-started/ 或 宝塔安装
Dockerfile 用于指定构建 Docker 镜像的方法

Dockerfile 一般情况下不需要完全从 0 自己写，建议去 github、gitee 等托管平台参考同类项目 (比如 springboot)

#后端
FROM maven:3.5-jdk-8-alpine as builder

# Copy local code to the container image.
WORKDIR /app
COPY pom.xml .
COPY src ./src

# Build a release artifact.
RUN mvn package -DskipTests

# Run the web service on container startup.
CMD ["java","-jar","/app/target/user-center-backend-0.0.1-SNAPSHOT.jar","--spring.profiles.active=prod"]

#Nginx.conf
server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }
}

#前端
FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Dockerfile 编写:

• FROM 依赖的基础镜像
• WORKDIR 工作目录
• COPY 从本机复制文件
• RUN 执行命令
• CMD /ENTRYPOINT (附加额外参数)指定运行容器时默认执行的命令

根据 Dockerfile 构建镜像

#后端
Docker build -t user-center-backend:v0.0.1
#前端
Docker build -t user-center-frontend:v0.0.1

启动

#后端
Docker run -p 8080:8080 -d user-center-backend:v0.0.1
#前端
Docker run -p 80:80 -d user-center-frontend:v0.0.1