从零开始一个web+微信公众号项目之部署篇

橘式不妙

已于 2024-07-04 10:12:26 修改

阅读量1.3k

点赞数 1

分类专栏：从零开始文章标签：阿里云腾讯云服务器

于 2023-03-29 11:37:33 首次发布

本文链接：https://blog.csdn.net/weixin_50849253/article/details/129832720

版权

从零开始专栏收录该内容

3 篇文章 0 订阅

订阅专栏

插播

部署到阿里云的服务可以参考阿里云CI/CD平台系列的教程，可以免费将前后端项目自动化部署到服务器，体验大厂的自动化部署

简介

整个项目的功能不是很复杂，但是大大小小算是3个独立的项目，都需要部署。

目前我是将三个项目都部署在一台丐版阿里云服务器上，分别是公众号服务、web前端服务、web后端服务。

部署

公众号服务

前置准备

由于配置公众号的服务器地址需要域名格式，所以只能申请域名并备案。

云服务器的厂商有多家（阿里云、腾讯云...），域名与与服务器如果不是在同一家厂商会无法正常使用的。所以最好申请域名和购买服务器在同一家厂商。

部署公众号服务

后端的服务都是使用springboot实现的，所以将项目打包成jar后上传服务器启动，通过nginx代理服务端口到对应域名。

启动服务

2023-03-28 17:58:07.706  INFO 6109 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8081 (http)
2023-03-28 17:58:07.737  INFO 6109 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2023-03-28 17:58:07.738  INFO 6109 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.71]

具体nginx配置

配置完成后重启nginx服务，然后访问代理的域名可验证是否成功 http://jucat.weridwoman.top

# 反向代理8081服务到jucat.weridwoman.top域名
server {
        listen 80;
        server_name jucat.weridwoman.top;

        location / {
          # return 201 "NNN";
          proxy_pass http://localhost:8081;
        }

}

web前端服务

web前端使用的是VUE3+elementui plus实现的，通过npm进行构建打包，使用nginx代理前端服务。

1.在服务器创建目录/web/vue（可以按自己的意愿设置目录）

2.将目录的所有者赋给启动nginx work进程的用户

2.1查看nginx work进程的用户 ps aux | grep nginx

[root@official-account conf.d]# ps aux | grep nginx
root      7871  0.0  0.1  39308  1012 ?        Ss   10:54   0:00 nginx: master process /usr/sbin/nginx
nginx     7872  0.0  0.2  39856  2360 ?        S    10:54   0:00 nginx: worker process

2.2更改目录的所有者为nginx用户

chown -R nginx:nginx /web/

3.查看目录是否操作成功

ll / # 列出根目录的所有子目录

drwxr-xr-x   3 nginx nginx  4096 Mar 28 15:24 web

4.打包前端服务并上传

4.1打包

npm run build打包后会生成dist目录

4.2上传到服务器

将整个dist目录压缩成dist.zip并上传到服务器目录下。

我是使用的mac系统，使用Termius软件可以很方便的向服务器上传软件，windows的用户可以使用xshell

连接到服务器后可以可视化选择服务器目录，将本地文件拖拽到服务器窗口即可自动上传

5.代理前端服务

Vue3打包后的目录就是普通的html+js+css文件，直接配置nginx代理到指定目录就可以直接访问了

nginx配置

# 反向代理8081服务到stage.weridwoman.top域名
server {
        listen 80;
        server_name stage.weridwoman.top;
        root /web/vue/dist/;
        index index.html;

        location / {
          # return 201 "NNN";
          try_files $uri $uri/ /index.html;
        }

}

解释主要指令

listen: 表示监听服务器的端口，如果是像我一样使用的是域名的方式，默认就是监听80端口不需要改动

server_name: 表示要匹配的域名，这个域名就是从服务商那里申请备案后的域名

root: 前端项目代码所在的目录

index: 直接访问域名时默认访问的文件名

location.try_files: 这里是为了实现前端路由

vue3项目一般都会使用vue-router做路由导航，如果不配置该指令时只能访问有index.html跳转的页面，其他页面nginx会以配置的location进行匹配，按上面的配置不加try_files的话都会返回404

重启nginx服务，访问 http://stage.weridwoman.top 可检查是否部署成功

如果返回403大概率是目录没有访问权限，可尝试修改代码目录的访问权限

部署后端服务

由于也是使用springboot实现，所以打包与上传、启动和公众号服务一样。

只有配置的代理服务配置有部分不同

nginx配置

# 反向代理8081服务到stage.data.weridwoman.top域名
server {
        listen 80;
        server_name stage.data.weridwoman.top;

        location / {
          proxy_pass http://localhost:8080;
        }

}

重启nginx服务，访问 http://stage.data.weridwoman.top 可检查是否部署成功