【实战攻略】手把手教你部署前后端分离项目到云服务器

最新推荐文章于 2025-05-24 19:21:08 发布

Serendipity_Carl

最新推荐文章于 2025-05-24 19:21:08 发布

阅读量1.1k

点赞数 37

分类专栏： Docker 云部署文章标签： docker linux centos nginx 服务器容器 tomcat

本文链接：https://blog.csdn.net/2302_80243887/article/details/147979387

版权

Docker 同时被 2 个专栏收录

1 篇文章

订阅专栏

云部署

1 篇文章

订阅专栏

本次博客的内容是将自己写的前后端分离项目部署到云服务器上

基于Nginx+Docker+redis+mysql

准备工作:

自己的项目
一台云服务器阿里云腾讯云等等均有免费的试用期限
连接工具如xshell finallshell xftp(文件传输) 软件都是一键式安装
在云服务器上安装Docker

第一步: 准备一台云服务器学生或者个人可以有三个月的免费试用

阿里云-计算，为了无法计算的价值

因为我自己已经搞过了无法提供具体的步骤自己摸索一下最后选择CentOS7.9的操作系统付款是免费的

最后成功后会给你创建一个实例出来稍等会就行以下是一些服务器的相关信息

第二步：通过xshell 连接云服务器

复制上图的公网IP 输入之前设置好的密码成功连接上服务器
没有公网IP 的点一下创建还是实例化之后它会给你生成

顺便将XTFP 也连接上方便后续上传文件修改文件

第三步: 打开自己的项目将自己的项目启动起来我的后端已启动

ps:这是我从git上拉的项目此项目启动时需启动redis缓存数据库

前端已启动找到前端项目下的package.json文件点击dev 项目运行指令或者在终端输入 npm run build 看你的项目是使用什么包管理的如pnpm yarn

OK 此时我们的项目就在本地成功启动了

接着我们开始打包前端在这里点击打包运行或者在终端输入指令

打包完成后在此目录下面会多出一个dist目录

接着我们找到这个dist文件将它拖到XFTP 云服务器中还需要另外建两个文件
分别是 Dockerfile nginx.conf 直接右击建就好了

下面是Dockerfile 文件中的内容注释已经写好了

# 从 nginx 镜像开始构建
FROM nginx

# 将项目根目录下的 dist 目录中的内容复制到容器的 /usr/share/nginx/html 目录中，作为静态文件目录
COPY ./dist /usr/share/nginx/html

# 将项目目录下的 nginx.conf 文件复制到容器的 /etc/nginx/nginx.conf 路径下，以配置 nginx
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露 80 端口，使容器可以通过此端口对外提供服务
EXPOSE 80

# 启动 nginx，并以前台模式运行（-g "daemon off;" 表示在前台运行）
CMD ["nginx", "-g", "daemon off;"]

这是nginx.conf文件注意下面的服务器名称要写自己服务器的公网IP

# 定义Nginx用户和工作进程数量
user nginx;
worker_processes 1;

# 指定错误日志的位置和级别
error_log /var/log/nginx/error.log warn;
# 存储Nginx进程ID的文件路径
pid /var/run/nginx.pid;

# 事件模块配置
events {
# 每个worker进程可以同时处理的最大连接数
worker_connections 1024;
}

# HTTP模块配置
http {
# 包含MIME类型定义文件
include /etc/nginx/mime.types;
# 默认文件类型
default_type application/octet-stream;

# 定义日志格式
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;

# 启用高效文件传输模式
sendfile on;

# 设置keep-alive连接的超时时间
keepalive_timeout 65;

# 服务器配置
server {
# 监听端口
listen 80;
# 服务器名称
server_name 这里需要写自己的;

# 位置配置
location / {
# 网站文件的根目录
root /usr/share/nginx/html;
# 默认索引文件
index index.html index.htm;
# 尝试按顺序匹配请求的 URI，如果找不到则返回 index.html，适用于单页应用的路由
try_files $uri $uri/ /index.html;
}

# 定义错误页面
error_page 500 502 503 504 /50x.html;
# 配置50x错误页面的路径
location = /50x.html {
root /usr/share/nginx/html;
}
}
}

接着我们需要借助Docker容器部署

安装步骤教程我放在文章开头了大家可以下载查看安装步骤基本莫有问题

然后我们需要拉取nginx的镜像

docker pull nginx 默认拉取最新的版本

切换目录到有dist的文件夹中我的是/root/Home 根目录下的root中的Home

执行构建镜像的代码

docker build -t 你想起的名字 .

查看是否构建成功

docker images #查看所有的镜像

创建容器

docker run -d -p 80:80 --name myvue vue_project
-d 以后台模式运行

-p 端口映射将服务器的80端口映射到主机上的80端口

--name 起个名字

后面接镜像名

成功构建

此时我们打开浏览器输入 http://你的服务器公网IP 就可以看到前端页面了因为默认打开就是80端口因此就不需要写
前端的部署就此成功

后端部署

同样地先拉取Mysql 镜像 redis镜像因为我们使用了这些技术

docker pull mysql

docker pull redis

分别实例化容器

接着打开我们的Idea 修改里面的配置

按两下Shift 可以进行搜索将这两个文件中的localhost改为服务器的IP 还有设置Mysql的密码为你服务器创建容器的密码 Redis同理

这些工作做好了之后点击右边的Maven 清除字节码之后打包成Jar包找到对应的输出位置(即先双击clean 再点package)

找到对应的Jar包位置

一般在target目录下面

OK 我们将这个Jar包传输到云服务器上记住当前的目录后续会用到

在此目录中新建一个文件名为Dockerfile 里面的文件内容如下

# 使用OpenJDK官方镜像
FROM openjdk:8-jdk-alpine

# 设置工作目录
WORKDIR /app

# 复制Jar包到容器
COPY newsrec-admin.jar app.jar

# 暴露端口（根据实际配置调整）
EXPOSE 8080

# 启动命令（可配置JVM参数）
ENTRYPOINT ["java", "-jar", "app.jar", "--spring.profiles.active=prod"]

接着打开服务器命令行切换到有Jar 的目录下执行构建镜像操作

docker build -t rouyi .

实例化容器

docker run -d --name rouyi -p 8080:8080 -e SPRING_DATASOURCE_URL="jdbc:mysql://你的IP:3306/ruoyi?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8" -e SPRING_DATASOURCE_USERNAME=root -e SPRING_DATASOURCE_PASSWORD=123456 rouyi

#设置环境 mysql密码时区等