关于部署上线那些事

1准备服务器

购买服务器

为服务器初始化软件：宝塔面板（方便管理服务器）、Mysql、java环境、docker等。

2前端

上线前准备：前端上线对接后端地址。修改前端请求的后端地址。（编译阶段就区分好了环境）

开发环境：前端请求的是 localhost:XXXX 或者说是测试用的接口地址

上线环境：前端请求的是 xxxx.com/api 之类的正式地址

上线步骤：

本地打包构建。
给服务器安装Nginx。用Nginx等web服务器来提供访问前端服务能力
把dist网页目录放到服务器上。

纯css、js、html项目无需打包构建，使用了框架的项目需要打包构建为css、js、html项目。使用了框架建议参考官方文档部署项目。

快速上线：可以依赖宝塔面板快速部署上线

1.菜单栏添加站点（前提是安装了nginx才会有此页面）。

2.初始化站点信息。

3.将前端编译好的文件放到指定文件夹下。

4.默认该ip:80可以访问前端服务了。

3后端

关键：网络必须要连通
如果自己学习用：单个服务器部署这三个项目就足够
如果你是搞大事，多个服务器建议在同一内网，内网交互会更快、且更安全

上线准备：后端上线对接中间件、数据库地址（运行阶段区分环境）

开发环境：后端请求的数据库地址是 localhost:3306 ，请求的注册中心、redis等中间组件地址都是 localhost

上线环境：后端请求的地址是 xxxx.com:3306 之类的正式地址

上线步骤：

本地编译构建。
把jar包放到服务器上。
手动运行jar包。

快速上线：可以依赖宝塔面板快速部署上线

上传java的jar包到服务器。
在网站菜单栏添加java项目。

4Docker部署

Dockerfile用于指定构建 Docker 镜像的方法。

Docker构建优化：减少尺寸、减少构建时间（比如多阶段构建）

前端部署步骤：

本地打包dist包
本地编写Dockerfile文件（参考本项目）
将前端代码文件上传到云服务器。或者dist文件夹、docker文件夹、Dockerfile文件上传。
运行 docker build -t [标签名:标签版本]构建镜像

后端部署步骤：

本地打包jar包
本地编写Dockerfile文件
将jar包和Dockerfile文件上传到云服务器
运行 docker build -t [标签名:标签版本]构建镜像

容器化后存在的问题：各个容器的id地址不同且重启容器后ip会变化。代码中的localhost微服务之间的请求就失效了！！！

5Docker平台部署

云服务商的容器平台（腾讯云、阿里云）
面向某个领域的容器平台（前端 webify、后端微信云托管）

6域名解析

购买域名
解析域名
备案域名
配置nginx路由

7跨域问题解决

浏览器为了用户的安全，仅允许向同域名、同端口的服务器发送请求。

如何解决跨域：

把前后端域名、端口改成相同的
让服务器告诉浏览器允许跨域（返回cross-origin-allow响应头）
Nginx网关配置允许跨域。修改nginx.conf配置文件加响应头

location ^~ /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    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-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,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;
    }
}

修改后端服务允许跨域
1. 配置 @CrossOrigin 注解
2. 添加 web 请求拦截器

/**
 * 全局跨域配置
 *
 * @author wzy
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 覆盖所有请求
        registry.addMapping("/**")
                // 允许发送 Cookie
                .allowCredentials(true)
                // 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}