前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号

3. 前端

这里介绍的是idea开发工具下的项目打包

3.1 项目打包

一定要在指定项目路径下打开 Terminal，不然会打错项目的包.

1. 右击项目名称，然后点击 Open in Terminal：

2. 在下面的 Terminal窗口中， 输入打包命令： npm run build，然后回车即可开始打包：

   

   打包成功：

   

3.2 部署

1. 该前端项目路径下找到 dist文件夹，即已打包好的代码和静态文件都在里面。

2. 将 dist文件夹上传至服务器

   阿里云服务器：可以通过共享的那个磁盘进行复制拷贝直接上传；

3. 将 dist文件夹放在 nginx目录下的 html文件夹中

   

   

3.3 修改 nginx 配置文件

在nginx目录下的conf文件夹中找到 nginx.conf 配置文件，先备份一下（以防自己乱配配错了），然后双击点开 nginx.conf

根据自己的情况修改配置文件：

3.4 访问

在 nginx 启动的情况下，部署并配置好文件后，即可根据 公网IP+:端口号 或 域名，在浏览器上访问，如下：

http://xx.xxx.xxx.xx:8004/

如果能正常打卡前端项目的首页，即部署成功。至于能不能跟后端连通，还得部署好后端和数据库。

4. 后端

这里介绍的是idea开发工具下的项目打包

4.1 项目打包

先点开右边的 maven缩小工具栏，先双击 clean清一下缓存，然后再双击 package 进行打包：

4.2 部署

1. 该后端项目路径下找到 xxx.war 打包文件。

2. 将 xxx.war 打包文件 上传至服务器

   阿里云服务器：可以通过共享的那个磁盘进行复制拷贝直接上传；

3. 将 xxx.war 打包文件 放在Tomcat目录下的 webapps文件夹中：

   

在Tomcat目录下的 bin文件夹中双击 startup.bat即可启动Tomcat，运行Tomcat后会自动将打包文件解压：

4.3 修改 Tomcat 配置文件

进入tomcat的conf目录下，找到server.xml文件进行备份，然后再配置.

5. 数据库

5.1 与MySQL建立连接

1. 点击连接，在下拉列表中选择 MySQL

   

2. 在弹出的对话框中输入连接名，然后点击左下角的 “测试连接” ，如果成功会弹出 “连接成功” 提示框，然后点击提示框中的 “确认”按钮，再点击右下角的 “确认”按钮，即新的连接已创建成功：

3. 左边会出现刚刚创建的连接，双击新建的连接名，即可自动连接打开：

   

5.2 将项目的数据迁移导入服务器中

1. 先将本机数据库中数据转储为SQL文件：双击要迁移的数据库名，连接后再右击，然后选中 ”转储 SQL 文件“ -----》 ”结构和数据…“，然后选择 转储的SQL文件 保存的路径位置.

2. 将该 SQL文件 上传至服务器，在服务器中的 Navicat中新建一个同名的数据库：

   • 在新建的roseLin连接名选中右击，然后在弹出的右键菜单中选择 ”新建数据库…“；

   • 在弹出的 ”新建数据库“ 对话框中填入 和本机转储的数据库一致的数据库名，字符集和排序规则可以根据自己需求选择，也可以不填，然后点击确认；

     

3. 双击新建好的数据库名，连接后再右击，然后在弹出的右键菜单中选择 ”运行SQL文件…“；

4. 在弹出的 ”运行 SQL 文件“对话框中，点击右侧 ”…“ 按钮，选择要运行的SQL文件，然后点确定再点击开始，即可将数据库完整复制过来；

   

5.3 创建新用户

这里之所以会介绍 如何创建新用户，是因为我后端项目连接数据库不是用的 MySQL的root用户和密码连接登录，是我之前在本机自建的用户roselin，故将数据库的数据迁移到服务器时，也要创建同样的用户roselin 用于后端连接数据库.

后端连接数据库部分代码：

......
datasource:
 type: com.alibaba.druid.pool.DruidDataSource
 druid:

   #    MySQL配置
   url: jdbc:mysql://localhost:3306/zssy_ydpd_dev?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&allowMultiQueries=true&allowPublicKeyRetrieval=true
   username: roselin
   password: roselin

......

1. 点击菜单栏中的 “用户” ，然后再点击下面的 “新建用户” ：

   

2. 在 “常规”栏中填入相关信息，用户名和密码可以自定义，主机名根据需要填写：

   

3. 在 “服务器权限”栏中勾选该新用户可以拥有的权限：

   

4. 在 ”权限“栏中点击 ”添加权限“，在弹出的 ”添加权限“的对话框中先在左侧选择要授权于新用户的数据库，并勾选右侧其可以拥有的操作权限，然后勾选好后点击下面的 ”确认“按钮：（可以添加多个数据库权限）

   

5. 最后点击左上角的保存即可：

   

6. 查看：点击菜单栏中的 ”用户“ 即可查看到刚刚新创建的用户

   

6. 使用 公网IP/域名 访问

nginx 和 Tomcat 都要启动，然后在浏览器的地址栏输入 公网IP+:端口号 或 域名 直接访问。

切记：若要随时都能访问该项目，nginx 和 Tomcat 要一直处于运行状态，不能关闭服务器。

7. 将页面挂在到微信公众号上

因为只是做个项目部署着玩，所以关于微信公众号部分只涉及到测试号，正式的微信公众号还未挂载过项目页面.

7.1 测试号申请

官方申请微信公众号测试号的地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

登录成功后就可以获取到测试号的信息：

7.2 设置外网域名

1.配置接口配置信息

在页面找到接口配置信息那一栏：

• URL：通过IIS发布消息接口（接口编写方式如下），并把接口地址填入URL中。必须以 http:// 或 https:// 开头，分别支持80端口和443端口，最好就是使用 域名，不要使用公网IP（例如：https://xxxxxx.ngrok.io/api/ydpd/app/wxBind）；

  使用 ngrok 将内网映射成外网可以访问的域名，参考第二部分的软件安装的第2.7节

  具体后端接口代码如下，接口地址例子：https://xxxxxx.ngrok.io/api/ydpd/app/wxBind，app是Controller，wxBind是Action。

  /**
   * APP微信相关
   */
  @RestController
  @RequestMapping("/app")
  @Api(tags = "APP微信相关接口")
  public class AppWxController {
  
      ......
  
      /**
       * 微信认证
       */
      @RequestMapping("wxBind")
      @ApiOperation(value = "认证微信", notes = "认证微信")
      public String wxBind(@ApiParam(value = "signature", required = true) @RequestParam(name = "signature", required = true) String signature,
                           @ApiParam(value = "timestamp", required = true) @RequestParam(name = "timestamp", required = true) String timestamp,
                           @ApiParam(value = "nonce", required = true) @RequestParam(name = "nonce", required = true) String nonce,
                           @ApiParam(value = "echostr", required = true) @RequestParam(name = "echostr", required = false) String echostr) {
          System.out.println("result"+wxMpService.checkSignature(timestamp, nonce, signature));
          return wxMpService.checkSignature(timestamp, nonce, signature) ?  echostr: signature;
      }
  	......
  }
  

• Token：可随意填写，但是必须和接口所传的Token值保持一致

  后端关于微信接口的配置代码：

  wx:
    mp:
      appid: wx********   # 要和测试号给的 appID、appsecret 和 token 信息一致
      secret: 8****c7a*****ec3b450***4bd7
      token: wxapp
      aesKey:
  

2.配置JS接口安全域名

在页面找到JS接口安全域名那一栏：

JS接口安全域名：用于项目对微信接口进行API接口请求（可以是 域名，也可以是 IP+端口号，但不需要填写http或https）

为了防止在项目中调用微信接口时出现 config:invalid url domain 的问题，JS接口安全域名要与项目页面请求路径域名一致；

比如，项目发起的请求是 http://xxx.xxx.xx/api/ydpd/app/wxSign，则JS接口安全域名就要填入：xxx.xxx.xx

3. 体验接口权限表配置

注意：不要填 http或https，直接填写域名 或 IP:端口号

7.3 自定义公众号上的菜单栏

官网微信开放文档：https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html

• 微信公众平台技术文档–>自定义菜单，在该页面底部，可以发现有“使用网页调试工具调试该接口”，可以使用它进行创建菜单

• 先通过 appid 和 secret 获取 access_token（如下图），appid 和 secret 在测试号管理的测试号信息栏里可以查看到：

  

  

• 获取到 access_token 后，在接口类型中选择 “自定义菜单”，把获取到的 access_token 和 菜单脚本 【可参考微信公众平台技术文档中的自定义菜单中的脚本格式】填写到参数列表中。

  

• 然后打开关注的测试微信公众号，就可以在公众号的菜单栏中看到 “中三移动盘点” 这个模块。

7.3 访问

在页面找到测试号二维码那一栏，然后使用微信扫描二维码关注该测试公众号，关注后即可在该测试号上查看自己的项目。关注成功后，稍等一会就会显示出用户列表。如下：

以上内容是自己整理总结的，若有不对的地方，欢迎大家指出，一起学习交流。

第一篇：前后端分别部署教程 ---- 第一部分服务器
第二篇：前后端分别部署教程 ---- 第二部分相关软件安装