手动部署FMS前端项目

一、前置准备

阿里云99元/年申请一个测试机器，或者自己开通阿里云测试机，使用Ubuntu 24.04 64位

# 1. 更新系统软件包
sudo apt-get update && sudo apt-get upgrade -y
# 2. 安装必要工具
sudo apt-get install -y curl git make

二、安装 Docker 并配置镜像加速

这个地址https://8ifzc8r9.mirror.aliyuncs.com换成自己的，自己到阿里云免费申请;

直接百度 阿里云 镜像加速器 如何申请

# 1. 安装 Docker
sudo apt-get update
sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update && sudo apt-get install -y docker-ce

# 2. 配置阿里云 Docker 镜像加速器
sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://8ifzc8r9.mirror.aliyuncs.com"]
}
EOF

# 3. 重新启动docker
sudo systemctl daemon-reload
sudo systemctl restart docker
# 4. 查看当前生效的 Docker 配置
sudo docker info | grep -A 1 "Registry Mirrors"
# 5. 验证 Docker 安装
sudo docker version
sudo docker run hello-world  # 应输出 "Hello from Docker!"

三、项目根目录下新建Dockerfile文件

# 使用官方的 Node.js 镜像作为基础镜像
FROM node:latest

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 复制项目文件到工作目录
COPY . .

# 构建生产环境代码
RUN npm run build

# 使用Nginx作为生产服务器
FROM nginx:alpine
COPY --from=0 /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露应用运行的端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

四、阿里云服务器构建文件夹

mkdir -p /etc/fms_nginx

五、上传源码文件到fms_nginx文件夹下

六、构建docker镜像文件

阿里云服务器切换到 /etc/fms_nginx 目录下
fms-vite-project自己定义，docker镜像文件名称

docker build -t fms-vite-project .

构建镜像文件可能会出错，因为通过npm install和npm run builer的时候会因为网络或者代码的问题出错，根据提示信息处理

七、运行docker容器

80:80是阿里云服务器和容器之间的端口映射，fms-vite-project是上面构建的docer镜像文件

docker run -d -p 80:80 fms-vite-project

八、浏览器运行测试

浏览器直接输入阿里云外网地址，如果能显示登录页面说明部署成功