全网最全的项目部署和网站上线

一.域名

项目上线，绑定域名，网站备案需要经过云服务器和工信部管局，需要经过比较长的时间，即便项目已经完成，网站备案需要时间。可以在做项目之前提前网站备案，查看下方文章，全面了解绑定域名，网站备案。

全网最全的域名解析和网站备案

二.多环境和前后多环境实战

多环境和前后多环境实战

三.服务器初始化和安装依赖

3.1 服务器初始化

1. 首先购买一台服务器，各大云服务商的新用户都有优惠，推荐先看“最新活动”页面，比如：https://cloud.tencent.com/act。

2. 推荐购买轻量应用服务器，提供了很多开箱即用的模板，帮我们预装了环境和软件，省时省力。

3. 宝塔 Linux 是一个可视化 Linux 运维管理工具，提供了很多帮助我们管理服务器的功能，适合中小团队或者个人学习使用。

4. 购买好服务器后，进入控制台，可以看到新增的服务器信息，注意不要主动对外暴露公网 IP！

5. 点击服务器进入详情页，在防火墙 中放行宝塔面板端口，否则无法在自己的电脑上访问宝塔。

6. 进入应用管理标签页，登录宝塔。次登录时，需要先登录服务器，通过输入命令的方式获取宝塔默认账号密码。

7. 首次进入宝塔时，会提示我们安装环境，这里推荐安装 LNMP（包含 Nginx 服务器），适合部署前后端分离的项目。

8. 首次进入宝塔面板时，记得修改面板账号密码（每次修改完都要重新登录）。

3.2 安装依赖

安装mysql、redis、JDK等环境。

查看下方文章，了解更多。

如何使用云服务器安装宝塔面板？

四.前后端项目部署

4.1 部署规划

在正式操作前后端部署前，我们要先进行一个规划，比如要部署哪些项目和服务、需要哪些依赖、占用哪些端口等。

4.1.1 部署项目

前端：通过 Nginx 进行部署，访问地址为 http://{域名}。
后端：通过 Nginx 进行转发，访问地址为 http://{域名}/api ，实际运行在 8120 端口。

为什么要用 Nginx 转发？
前端和后端域名一致，保证不会出现跨域问题。

4.1.2 部署依赖

Nginx：服务器 80 端口，默认已安装。
数据库：服务器 3306 端口，默认已安装。
Redis：服务器 6379 端口，需要手动安装。

4.1.3 开通端口

做好规划后，我们需要在云控制台的防火墙中开通需要外网访问的服务端口。

4.2 前端部署

1. 修改配置。线上的前端需要请求线上的后端接口，所以需要修改常量文件中的线上请求地址。

2. 打包部署。执行 package.json 文件中定义的 build 命令，执行打包构建。打包成功后，得到 dist 目录。在宝塔面板配置 Nginx 服务器，暂时用 IP 作为域名，根目录改为自己前端文件所在的目录（没有就新建）。如图：

将打包好的 dist 目录内 的所有文件上传到上述根目录中。

访问地址，就能打开前端网站了。

3. Nginx 转发。

但是经过验证，目前访问除主页外的其他页面，如果刷新，就会出现 404。

怎么解决呢？
遇到部署上的问题，建议先阅读项目使用的框架的官方文档，比如：https://pro.ant.design/zh-CN/docs/deploy，官方提供了 Nginx 部署的方法。

这个问题是由于服务器上不存在对应的页面文件（比如 /generator/add.html），所以需要在 Nginx 配置转发。如果找不到某个页面文件，就加载主页 index.html 文件。
配置如下：

追加的配置如下：

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

4.3 后端部署

1. 修改配置和代码。修改 application-prod 生产环境配置。
2. 打包部署。打包成功，得到 jar 包文件，先上传 jar 包到服务器，然后添加 Java 项目，注意要激活生产环境的配置。如果发现启动失败，需要先观察日志。
3. Nginx 转发。

如果访问的是后端接口（地址有 /api 前缀），则 Nginx 将请求转发到后端服务，代码如下：

location /api {
  proxy_pass  http://IP:8120;
  proxy_set_header Host $proxy_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_buffering off;
  proxy_set_header Connection "";
}

配置如图：

修改完后，就可以通过 80 端口（可以省略）访问到接口文档，比如：http://49.235.165.230/api/doc.html。

查看下方文章了解更多。

前后端项目部署和解决跨域

五. 部署项目的操作流程

以宝塔 Linux 原生部署为例：

1. 购买云服务器。
2. 安装和初始化宝塔 Linux 面板。
3. 在宝塔面板中安装项目部署依赖软件，比如 jdk、mysql、nginx、tomcat、Java 项目管理器等。
4. 把本地的数据同步到宝塔安装的线上数据库。
5. 后端：使用 Java 项目管理器，添加 Java 项目，把本地 mvn package 命令打好的 jar 包上传到 Linux 服务器，配置启动参数和激活配置（prod），点击 “启动” 即可。
6. 前端：上传本地打包好的 dist 网站静态文件目录到服务器，然后配置 Nginx 指向文件目录路径，即可访问前端静态文件。
7. 在 Nginx 配置反向代理，请求服务器 IP（或域名时）+ 后端路径（/api）时，请求转发到服务器内的实际后端服务端口（比如 localhost:8080）。
8. 在服务器运营商提供的界面和宝塔面板界面中开启防火墙的 80 端口。

注意：

上线项目写了域名 不需要写端口号。

IP记得加端口号

跨域：

在前端的nginx中加入上面那个location配置

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

后端nginx:

server {
  listen   80; # 监听的端口 
  server_name  xx.xx.xxx.xx; # 处理的host地址 （请替换成你对应的项目访问 ip 或 域名）!!!
  root    /usr/share/nginx/html; # vue项目存在的目录（替换成你对应的地址，如果你这是用docker部署的请改成你容器内的地址）
  location / {
      try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
      index  index.html index.htm;
  }
  #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
  #因此需要rewrite到index.html中，然后交给路由在处理请求资源
  location @router {
      rewrite ^.*$ /index.html last;
  }
}

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;
    }
}