当前位置:   article > 正文

【码上起飞】手把手把若依(ruoyi)前后端分离的系统部署到腾讯云服务器上(小白教程)_若依前端部署到服务器

若依前端部署到服务器

手把手把若依(ruoyi)前后端分离的系统部署到腾讯云服务器上并绑定SSL证书(小白教程)

###1.前言
现在日益流行的脚手架遍地都是,但是好用的不是很多,今天找的这款我认为还可以前端采用的vue后端采用的springboot,但是也是有瑕疵的,部署用就不挑三拣四了,废话不多说直接开干。

2.准备工作

     工欲善其事必先利其器,首先手里得有东西,像李云龙一样先把东西搞过来,然后再进行分配。博主买的是腾讯云的2核4G的服务器用别人的号买的因为自己不是新用户,新用户能便宜一点。
  • 1

在这里插入图片描述
那就开始安装docker、mysql、redis、nginx这些基本的不会往期的博文都有,自己可以去找一下。然后就是买域名了,博主买的域名是比较便宜的因为自己部署着玩。
在这里插入图片描述
下载证书
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.打包服务

3.1 后端进行打包

在这里插入图片描述
然后在项目相应目录的target目录找到相应的jar包,上传到自己的服务上就可以用dockerfile打包镜像了,这里用的是openjdk17
在这里插入图片描述
Dockerfile文件

FROM openjdk:17.0.2-oraclelinux8
ENV TZ=Asia/Shanghai
ENV SERVER_PORT=8080 LANG=C.UTF-8 LC_ALL=C.UTF-8 JAVA_OPTS=""
EXPOSE ${SERVER_PORT}

ENV SERVER_PORT=8889 LANG=C.UTF-8 LC_ALL=C.UTF-8 JAVA_OPTS=""
EXPOSE ${SERVER_PORT}
MAINTAINER xxxxx
ADD ruoyi-admin.jar ruoyi.jar
ENTRYPOINT ["java","-jar","ruoyi.jar"]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

自己写的脚本start.sh

#!/bin/bash
# 服务名称
current_date=$(date +%Y-%m-%d-%H-%M-%S)
docker -v
echo "停止容器"
# 停止容器
docker stop ruoyi-admin
# 等待三秒
echo sleep 3s
sleep 1
echo sleep 2s
sleep 1
echo sleep 1s
sleep 1

echo "删除容器"
# 删除容器
docker rm  ruoyi-admin
# 等待三秒
echo sleep 3s
sleep 1
echo sleep 2s
sleep 1
echo sleep 1s
sleep 1
echo "删除镜像"
# 删除镜像
docker rmi ruoyi-server
# 等待三秒
echo sleep 3s
sleep 1
echo sleep 2s
sleep 1
echo sleep 1s
sleep 1
cd /docker/server1
echo "打包镜像"
# 打包镜像
docker build -t ruoyi-server .
echo "运行镜像"
# 运行镜像
docker run -d -v /docker/server1/logs/ruoyi-admin${current_date}:/logs/ruoyi-admin --restart=always  --privileged=true --name ruoyi-admin -p 8080:8080 -p 8889:8889 ruoyi-server
echo "成功"
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

直接cd到此目录下执行sh start.sh就能自己构建镜像了,也挺方便的,下面是已经打包好的镜像和启动的服务
在这里插入图片描述
在这里插入图片描述

3.2 前端服务打包

导入前端代码到VSCODE进行打包
在这里插入图片描述

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
#构建生产环境
npm run build:prod
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

操作完毕项目总目录会出现一个dist目录把dist上传到nginx的html目录里面在这里插入图片描述

在这里插入图片描述
然后把证书放在cert目录在这里插入图片描述
然后就是nginx的conf的配置

worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    # 限制body大小
    client_max_body_size 100m;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    upstream server {
        ip_hash;
        server xx.54.30.xxx:8080;
    }

    upstream monitor-admin {
        server xx.54.30.xxx:9090;
    }

    upstream powerjob-server {
        server xx.54.30.xxx:7700;
    }
 server {
 listen 80;
 server_name  www.smartnba.chat;	
 return 301 https://$host$request_uri; 
 }
 server {
 listen 443 ssl;
 server_name  www.smartnba.chat;	
 ssl_certificate      /etc/nginx/cert/smartxxx.chat_xxxx.crt; 
 ssl_certificate_key  /etc/nginx/cert/smartxxx.xxxx.key; 
 ssl_session_timeout 5m;
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
 ssl_protocols TLSv1.2 TLSv1.3;
 ssl_prefer_server_ciphers on;
   location / {
            root   /usr/share/nginx/html; 
            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_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://server/;
    }
         location /admin/ {
            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 http://monitor-admin/admin/;
        }
      location /powerjob/ {
            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 http://powerjob-server/;

        }

        # 解决 powerjob 代理之后静态文件无法访问的问题 请勿修改乱动
        location ~ ^/(js|css|jpg|png|svg|woff|ttf|ico|img)/ {
               proxy_pass http://106.54.30.202:7700;
        }

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

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94

在这里插入图片描述附nginx的docker部署

docker run -p 80:80 -p 443:443 --name nginx --restart=always 
-v /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf 
-v /docker/nginx/log:/var/log/nginx
-v /docker/nginx/html:/usr/share/nginx/html 
-v /docker/nginx/cert:/etc/nginx/cert  -d nginx:1.23.4
  • 1
  • 2
  • 3
  • 4
  • 5

4 总 结

  项目到这里基本上差不多了,新买的域名需要备案不然访问会访问不通,如果自己的服务访问不通首先看一下自己的服务器的防火墙开了没,如果开了把自己的端口放行一下,腾讯云服务器中发的安全组也放行一下。
  • 1

在这里插入图片描述
最后访问一下,别说像那么回事,备案自己就可以备案了博主的网站已经进行了工信部域名备案和公安备案
在这里插入图片描述
有什么问题可以直接私信博主,学习的道路上难免磕磕碰碰都属于正常。毕业设计参考、小系统制作都可以联系博主交流探讨玩玩!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/926973
推荐阅读
相关标签
  

闽ICP备14008679号