微信小程序+SpringBoot+vue项目部署到云服务器完整版

微信小程序+SpringBoot+vue项目部署到云服务器完整版

开发一款微信小程序，使用SpringBoot作为小程序的后台数据接口，并将SpringBoot和Vue项目部署到云服务器上。

云服务器前期准备

以阿里云产品为例：

1. 购买阿里云服务器；
2. 购买阿里云域名；
3. 域名备案；
4. 域名解析；
5. 申请阿里云数字证书ssl；
6. 开放用到的服务器端口
   

SpringBoot配置数字证书ssl

1. 下载数字证书
   
2. 将下载后的xxxxxx.jks文件放到SpringBoot的resources文件夹里面
   
3. 在配置文件yml中配置ssl
   

  ssl:
    key-store: classpath:xxxxxxxxx.jks
    key-store-password: 密码
    key-store-type: JKS

4. 将SpringBoot项目进行打包

Docker部署SpringBoot项目

1. 服务器上安装docker
2. docker安装mysql

docker 拉取 mysql 最新版：
docker pull mysql
docker运行 mysql：
docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=数据库密码 -d mysql:latest

3. docker安装redis

docker 拉取 redis：
docker pull redis
docker 运行 redis:
docker run -d --name redis -p 6379:6379  redis

4. docker安装jdk

docker 拉取 jdk:
docker pull kdvolder/jdk8
docker 运行 jdk:
docker run -di --name=jdk1.8 kdvolder/jdk8

5. 新建一个SpringBoot文件夹，将打包后的SpringBoot项目放到文件夹中，并在文件夹中创建Dockerfile文件
   
6. 编写Dockerfile文件

FROM openjdk:8
WORKDIR /SpringBoot
COPY ruoyi-admin.jar app.jar
EXPOSE 8080
ENTRYPOINT [“java”, “-jar”, “app.jar”]

7. 在SpringBoot目录下构建SpringBoot项目镜像

docker build -t ruoyi .
注意：在最后面有一个点

8. docker运行SpringBoot项目

docker run -d -p 8080:8080 ruoyi

Nginx部署Vue和SSL证书

1. 下载数字证书
   
2. 创建nginx文件夹
3. 进入nginx文件夹下，再创建一个cert文件夹并将下载好的证书文件放入该文件夹下
   
4. 将打包后的前端dist文件放在nginx文件夹下面
5. 在nginx文件夹下面创建一个nginx.conf配置文件

worker_processes  1;
events {
	worker_connections  1024;
}

http {
	   include       mime.types;
	   default_type  application/octet-stream;
	   sendfile        on;
	   keepalive_timeout  65;
	   
	   server {
	       listen       80;
	       server_name  域名;
	       rewrite ^(.*) https://域名 permanent;
	   }
	   
	  server {
	      listen       443 ssl;
	      server_name 域名;
	
	      ssl_certificate      /usr/share/nginx/html/cert/xxxxxxx.pem;
	      ssl_certificate_key  /usr/share/nginx/html/cert/xxxxxx.key;
	      
	      ssl_session_timeout 5m;
	      ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
	      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
	      ssl_prefer_server_ciphers on;
	
	      ssl_session_cache shared:SSL:1m;
	
	      fastcgi_param  HTTPS        on;
	      fastcgi_param  HTTP_SCHEME     https;
	
	      location / {
	          root   /usr/share/nginx/html/dist;
	          try_files $uri $uri/ /index.html;
	          index  index.html index.htm;
	      }

	      location /prod-api/ {
	              proxy_set_header Host $http_host;
	              proxy_set_header X-Real-IP $remote_addr;
	              proxy_set_header REMOTE-HOST $remote_addr;
	              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	              proxy_pass https://服务器ip地址:8080/;
	      }
	
	      error_page   500 502 503 504  /50x.html;
	      location = /50x.html {
	          root   html;
	      }
     }
}

6. 拉取 nginx 镜像

docker pull nginx

5、运行nginx容器

docker run -d --name nginx -p 80:80 -p 443:443 -v ./nginx:/usr/share/nginx/html -v ./nginx/nginx.conf:/etc/nginx/nginx.conf nginx

注：Vue前端显示时间与系统时间不一致解决方法

1、将本地 localtime 文件和 timezone文件复制到Spring Boot项目容器中

docker cp /etc/localtime 容器id:/etc/localtime
docker cp /etc/timezone 容器id:/etc/timezone

2、进入SpringBoot容器中

docker exec -it 容器id bash

3、执行同步时间命令

ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

4、重启SpringBoot容器，问题解决

sudo docker restart 容器ID

微信小程序

1. 在微信小程序开发管理中配置域名
   
2. 在微信小程序开发者工具中使用此域名访问后端接口