【部署上线，跨域】

布满荆棘的人生 2024-03-22 10:37 89阅读 0赞

## 法一：宝塔Linux部署 ##

**下载Nginx**  
![cde1822cfad34b18a64f25679201aee1.jpeg_pic_center][]

**将前端项目和后端项目在本地打包**  
后端本地打包，打包成功会生成.jar包  
![a87a880993fa4b4a92b59b4f24598806.jpeg_pic_center][]

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

**将本地打包的文件上传至网站的根目录下**  
![7a538150dac64be58d7d891e63ee065d.jpeg_pic_center][]

后端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

[cde1822cfad34b18a64f25679201aee1.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1e87e324352748ceb4d4b39928237e86.png
[a87a880993fa4b4a92b59b4f24598806.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d1698be0070946caabebb35bbc2257a2.png
[7a538150dac64be58d7d891e63ee065d.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/05abb1d7d0574cb4a3fa9b1a681c8646.png