服务器中使用Docker部署前端项目

一、准备前端项目

在项目终端使用命令打包

javascript 复制代码
npm run build

然后在你的项目文件夹里面会有一个dist文件夹,这就是前端项目打包的产物。

二、上传dist到服务器

首先在服务器中使用命令创建frontend文件夹,后续关于前端打包的所有文件都放到这里面。

javascript 复制代码
mkdir frontend

然后将dist文件夹上传到服务器,我这里选择scp命令上传

javascript 复制代码
# 格式:scp -r 本地文件路径 服务器用户@服务器IP:服务器目标路径
# 1. 上传 dist 文件夹(-r 表示递归上传文件夹)
scp -r /本地项目路径/dist  root@你的服务器IP:/path/to/frontend/

# 2. 上传 Dockerfile(单个文件无需 -r)
scp /本地项目路径/Dockerfile  root@你的服务器IP:/path/to/frontend/

示例
scp -r F:\大三学年(下学期)\教室预约系统\后台管理端代码\ClassroomReservationSystem\dist root@10.253.9.100:/frontend

命令运行成功后会让你输入服务器的密码,此时输入密码即可上传。

出现下面的界面则是上传成功

三、服务器中使用docker部署前端项目

1、创建 Dockerfile

在项目根目录创建 Dockerfile 文件,内容如下:

javascript 复制代码
# 阶段 1: 构建前端项目
FROM node:16-alpine as build-stage
WORKDIR /app
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制源代码
COPY . .
# 构建生产版本
RUN npm run build

# 阶段 2: 部署到 Nginx
FROM nginx:stable-alpine as production-stage
# 从构建阶段复制产物到 Nginx 服务目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 复制自定义 Nginx 配置(可选)
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露 80 端口
EXPOSE 80
# 启动 Nginx 服务
CMD ["nginx", "-g", "daemon off;"]

2、在 frontend 目录创建 Nginx 配置文件(含反向代理,对接后端)

frontend 目录下新建 nginx.conf(用于配置 Nginx 静态资源路径和接口代理,避免前端请求后端跨域 / 404)

javascript 复制代码
# 进入 frontend 目录(已在该目录可跳过)
cd /frontend

# 创建并编辑 nginx.conf
vi nginx.conf

i 进入编辑模式,粘贴以下内容(关键修改后端地址 http://10.253.9.100:8080 为你的真实后端地址):

javascript 复制代码
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  localhost;

        # 1. 托管前端静态资源(指向 dist 目录)
        location / {
            root   /usr/share/nginx/html;  # 容器内 dist 文件的存放路径
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  # 解决单页应用(SPA)刷新404问题
        }

        # 2. 反向代理:将 /api 开头的请求转发到后端(按需配置,无接口可删除)
        location /api/ {
            proxy_pass http://10.253.9.100:8080/;  # 你的后端地址(IP+端口)
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

3、 构建 Docker 镜像

javascript 复制代码
docker build -t your-project-name:latest .
  • your-project-name 是你的镜像名称
  • latest 是标签(版本号)

示例:

javascript 复制代码
docker build -t my-frontend:v1 .

4、运行 Docker 容器

使用以下命令启动容器:

javascript 复制代码
docker run -d -p 8080:80 --name your-container-name your-project-name:latest
  • -d:后台运行
  • -p 8080:80:将容器的 80 端口映射到主机的 8080 端口
  • --name:指定容器名称

示例:

javascript 复制代码
docker run -d -p 3000:80 --name nginx-frontend my-frontend:v1

5、验证容器是否正常运行

javascript 复制代码
docker ps | grep nginx-frontend

出现以下界面则说明容器正常运行

  • 此时在本地浏览器访问 http://服务器IP:3000,就能看到前端页面了!
相关推荐
像是套了虚弱散2 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
Madison-No72 小时前
【Linux】gcc/g++编辑器 && 初识动静态库 && 程序翻译过程
linux·服务器
衬衫chenshan2 小时前
【CTF】强网杯2025 Web题目writeup
前端
小白不想白a2 小时前
【shell】每日shell练习:安全日志入侵检测/系统配置文件合规检查
运维·服务器
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
洛克大航海3 小时前
Linux 中新建用户
linux·运维·服务器
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
三口吃掉你3 小时前
Docker安装Elasticsearch、kibana、IK分词器
elasticsearch·docker·kibana·ik分词器
程序猿追4 小时前
Vue组件化开发
前端·html
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存