项目部署

前言

经过前面章节的学习，云笔记项目用户界面基本搭建完毕，实现了注册、登录、设置名片、笔记本操作、笔记操作等功能。本小节，我们学习项目的部署，先将已完成的部分部署到服务器上，并解决部署过程中的各种问题。

服务器准备

把项目部署在服务器上，需要做一些准备工作：

• 首先，要在服务器上搭建起项目运行所需的环境，运行环境和开发环境保持一致就行；
• 其次，要保证项目运行的端口能正常访问。

运行环境

“Keller 云笔记”项目运行的环境要与开发环境基本保持一致，如：

• 安装 MySQL：1.5.7+
• 安装 Nginx
• 安装 JDK：1.8+

防火墙规则

如果要将项目部署在本地电脑，在确定运行环境安装完毕的情况下，直接按照文档说明部署即可。若将项目部署在远程服务器，除了要保证运行环境外，往往还需要做以下工作：

• 开启防火墙：新搭建的服务器防火墙一般是没有开启的，需要开启防火墙
• 设置防火墙规则：
  • 允许访问 80：该端口对应项目前端页面访问地址
  • 允许访问 8081：该端口对应 Nginx 文件服务器访问地址
  • 允许访问 443：该端口对应服务端访问接口访问地址
  • 允许访问 3306：该端口对应 MySQL 服务器访问地址

下面以 CentOS 7 为例，介绍开发端口所用到的相关防火墙操作指令。

1. 查看防火墙状态：systemctl status firewalld

• 要开放端口，首先要看防火墙已开启
• 使用该命令可以查看防火墙的状态
• running 表示防火墙已开启，直接查询端口开放状态即可
• dead 表示防火墙未开启，需要先开启放火墙，然后才能进行下一步操作

2. 开启防火墙：systemctl start firewalld

• 开启防火墙，运行完毕后没有任何提示，即表示防火墙开启完成
• 如果不放心，可以再执行一次查看防火墙状态的命令查看

3. 查看端口开放状态：firewall-cmd --query-port=80/tcp

• 查看要开启的端口（80）是否已开启
• yes 表示端口已开放
• no 表示端口未开放，需要使用开启端口的命令
• FirewallD id not running 表示防火墙未启动，需要查看防火墙状态，并开启防火墙

4. 开放端口：firewall-cmd --add-port=80/tcp --permanent

• 永久开放一个端口（80）
• success 表示开放成功

5. 重新载入配置：firewall-cmd --reload

• 重新载入防火墙配置
• 每次修改防火墙规则，都要运行此命令，使规则生效

其他可能用到的防火墙操作指令：

 #1.查看已打开的端口
 netstat -anp  
 #2.关闭防火墙 
 systemctl stop firewalld  
 #3. 移除端口 
 firewall-cmd --permanent --remove-port=80/tcp

Spring Boot 项目部署

多环境配置

Spring Boot 项目部署到服务器之前，要将相关参数修改成服务器配置，如：MySQL 连接地址、文件存储地址等，而在本地开发过程中又是另外一套配置。为了在不同环境下使用不同的配置，我们需要将其配置为多环境支持的，操作如下：

• 添加开发环境配置文件：在主配置文件 application.properties 同级目录下，新建 application-dev.properties 文件，将主配置文件中的内容复制过来，作为开发环境的配置文件
• 添加生产环境配置文件：在主配置文件同级目录下，新建 application-prod.properties 文件，作为生产环境的配置文件，格式与 application-dev.properties 相同，根据服务器的相关参数，修改相应配置
• 在主配置文件中切换不同的环境：主配置文件中仅保留一行配置项 spring.profiles.active=dev，其值为 dev 表示使用开发环境配置，即加载 application-dev.properties 中的配置；其值为 prod 表示使用生产环境配置，即加载 application-prod.properties 中的配置

application.properties 配置：

#spring.profiles.active=prod
spring.profiles.active=dev

application-dev.properties 和 application-prod.properties 中需要修改的配置项如下：

## 端口
server.port=443

... ...

#mysql 驱动类
spring.datasource.driverClassName = com.mysql.cj.jdbc.Driver
#mysql 连接地址
spring.datasource.url = jdbc:mysql://localhost:3306/kyle_notes?useUnicode=true&characterEncoding=utf-8&useSSL=false&allowMultiQueries=true
#mysql 用户名
spring.datasource.username = root
#mysql 密码
spring.datasource.password = 123456

... ...

# nginx 文件目录
nginx.path = /Users/yangkaile/Projects/nginx/keller/
# nginx 服务器访问地址
nginx.url = http://localhost:8081/keller/
# 原图存放的相对目录
img.path = image/img/
# 缩略图存放的相对目录
thum.path = image/thum/

# 前端访问地址
web.url = http://127.0.0.1:8088

Maven 打包

Keller Notes 项目使用 Maven 打包的方式，打包之前，在 Maven 配置文件 pom.xml 中添加如下配置：

        <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <finalName>kellerNotes</finalName>
    </build>

<plugins> 标签中指定打包时将 Spring Boot 打包进去，<finalName> 标签指定最终打包出的文件名为 KellerNotes.jar。

指定完毕后，运行 mvn package 命令即完成打包，打包完毕后可以在 target 目录下看到打成的 jar 包。

mvn package 成功执行效果图：

启动 Spring Boot

将打成的 jar 包上传到服务器后即可运行，运行命令为：

shell nohup java -jar kellerNotes.jar &

注意：

1. java -jar 命令前添加 nohup 的意思是在后台运行
2. 一定不要忘记最后的 & 符号
3. 使用 nohup 命令启动后，会在当前目录下生成一个 nohup.out 文件，该文件为程序运行日志，可以在 application-prod.properties 中配置其日志级别

另外，根据服务器的不同情况，可以在 java -jar 命令后面添加不同的参数。

--spring.profiles.active：运行时指定实际配置的环境。

如果打包时忘记切换环境，打成了开发环境的包，上传到服务器后，可以使用该参数指定其实际运行时加载的配置文件：

nohup java -jar kellerNotes.jar --spring.profiles.active=prod &

--spring.config.location：运行时指定外部的配置文件。

使用 maven package 命令打包后，配置文件与代码都在一个 jar 包中，如果需要修改配置文件，就要重新打包，比较麻烦。可以使用该参数，指定外部配置文件地址，实现代码和配置文件的分离。

#设置启动时读取 jar 包外的配置文件，这样能做到配置文件和代码分离
java -jar kellerNotes.jar --spring.config.location=file:./application-prod.properties &

Vue 项目打包

完成服务端代码的部署后，建议先使用 Postman 或其他 HTTP 测试工具对接口进行测试，如果可以正常访问，再开始部署 Vue 项目。

Vue 项目打包之前需要做的事情有：修改请求地址、修改配置文件等。

修改请求地址

首先在 api.js 文件中做如下修改：

import axios from 'axios';
// 如果是部署在服务器上，这个地址要改成服务器 IP 地址
let url = "https://127.0.0.1/";

/** 需要先登录再访问的路由 */
let api = url + 'api';

/** 不需要登录就能访问的路由 */
let base = url + 'base';

/** 上传头像需要访问的接口地址 */
let upload = url + 'upload';

/** 在编辑器中上传文件需要访问的接口地址 */
let editorImgUploadUrl = url + "upload/img";

/** 导出上传地址，供页面使用 */
export{
    editorImgUploadUrl,
    upload
}

经过这样的修改，可以将所有用到 URL 的地方都统一管理，服务器的域名或 IP 地址有变化，只用修改 url 变量就可以了。

这样修改完毕后，依次检查页面中用到请求地址的地方，统一使用 api.js 中的变量来代替，涉及到的页面有：

• Register.vue：注册页面上传头像的请求
• Home.vue：用户主页修改头像的请求
• MarkDown.vue：MarkDown 编辑器中上传文件的请求
• WangEditor.vue：富文本编辑器中上传文件的请求

修改配置文件

打包之前还要修改配置文件 vue.config.js，做如下修改：

module.exports = {
    // 部署应用时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: 'dist', //build 输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    // 默认在生成的静态资源文件名中包含 hash 以控制缓存
    filenameHashing: true,
    // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
    lintOnSave: process.env.NODE_ENV !== 'production',
  ... ...
}

npm 打包

最后，使用 npm 命令打包即可，打包完成后的文件在项目的 dist 文件夹下：

npm run build

打包完成后，将文件夹上传到服务器上，然后配置 Nginx。

Nginx HTTP 代理

Nginx 服务器的配置方法前面我们已经学过了，在服务器上的配置和本地电脑配置方法相同，首先配置静态文件服务，以支持访问用户头像、笔记中的图片等静态文件的功能。

静态文件服务

和本地电脑配置不同的地方在文件存放目录 alias，按照服务器上要存放的目录设置即可：

server {
        listen       8081;
        server_name  localhost;

        location /{
            alias   /data/nginx/kellerNotes;
            index  index.html;
          }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        } 
    }

Vue 项目入口

在 Nginx 上配置 Vue 项目的代理地址时，只需要将 root 路径指向 Vue 打包文件上传的路径即可：

server {
        listen       80;
        server_name  127.0.0.1;  
        root  /Users/yangkaile/Projects/nginx/vue/dist;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }

try_files $uri $uri/ /index.html; 这行配置的意思是，请求不同的路由，都使其路由到 index.html 页面，这样写是为了解决访问页面正常，但页面刷新会报 404 错误的问题，具体会在下面问题总结中讲解。Nginx 配置完成后，启动 Nginx 服务即可。

效果测试

注册

登录

用户主页

访问地址

http://47.93.84.8

问题总结

开启防火墙仍无法访问

如果已经开启了相应服务的端口，却仍无法访问服务，是因为不同的服务器有不同的安全策略，以阿里云服务器为例说明：

• 阿里云服务器有安全组策略，默认只开启 22 端口和 3389 端口，如果需要开启其他端口，需要在防火墙中开放端口后，在安全组策略中做相应配置。
• 配置方法为：进入控制台 -> 选中要操作的实例 -> 选择安全组端口 -> 添加安全组规则。

如图所示：

发送邮件失败

在项目部署后访问，可能出现本地运行时可以正常发送邮件，但是在服务器上无法发送邮件。

是因为 SMTP 默认端口 25 被阿里云封禁了，无法通过该端口向外发送请求，只能使用 SMTPS 端口 465 发送邮件。

修改 SendEmailUtil.java 中的 initSession() 方法，改用 465 端口发送邮件：

private static  Session initSession(){
        if(session == null) {
            try {
                Properties prop = new Properties();
                //邮件服务器地址
                prop.setProperty("mail.host", PublicConstant.mailServerHost);
                //邮件发送协议
                prop.setProperty("mail.transport.protocol", "smtp");
                //是否需要身份验证
                prop.setProperty("mail.smtp.auth", "true");

                                // 启用 SSL 安全传输 
prop.setProperty("mail.smtp.socketFactory.class","javax.net.ssl.SSLSocketFactory");
                                // 使用 465 端口
                prop.setProperty("mail.smtp.socketFactory.port", "465");
                prop.setProperty("mail.smtp.port", "465");
                //创建 session
                session = Session.getInstance(prop);
                //开启 Session 的 debug 模式，这样就可以查看到程序发送 Email 的运行状态
                session.setDebug(true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return session;
    }

Maven 打包自动执行测试方法

使用 Maven 命令打包时，默认会执行 test 方法，如果不想让其执行，可以使用如下命令：

mvn package -Dmaven.test.skip=true

Vue 页面刷新 404

Vue 部署后页面刷新会报 404 错误是因为：

• Vue 路由默认是 hash 模式，该模式的问题在于每次都会在浏览器地址中多一个符号 #。
• 为了去除该符号，将路由指定为 history 模式，而这种模式下，使用的路径不是真实的路径，在刷新页面时访问的资源在服务端找不到，就报 404 了。

解决方法，就是让所有请求都路由到 index.html：

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

源码地址

本小节完整的源码地址：

https://github.com/tianlanlandelan/KellerNotes

小结

本小节带领大家完成 Spring Boot 项目与 Vue 项目的部署工作，希望大家能按照说明自己完成项目的部署，如果在实际操作中有难以解决的问题，欢迎在微信群中交流。