专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Docker部署前端Web项目

ins518 2024-09-24 18:05:09 技术文章 23 ℃ 0 评论

1. 整体思路

  1. 通过Docker拉取node镜像，编译web工程源码
  2. 通过Docker拉取nginx镜像，运行已经构建的应用程序
  3. 可变参数的配置问题：
  4. 前端项目通常编译的时候会配置多个环境的参数，根据环境参数编译不同的文件，无法做到在各个环境使用同一个版本的镜像，例如：传入启动时可配置的后端服务地址。
  5. 使用环境变量可以在创建镜像的时候传递基础参数减少编译，可实现多个环境使用同一个版本的镜像，通过镜像运行时传入环境变量去指定各个变量。
  6. 方案：通过将环境变量传递到DOM，在VUE项目中读取DOM来进行使用环境变量。

2. 示例

整体目录结构如下：

[root@drccentosserver02 vue-test]# tree
.
├── babel.config.js
├── Dockerfile
├── nginx
│   └── nginx.conf
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

2.1 创建vue示例项目

vue create vue-test
cd vue-test

运行：npm run serve

2.2 编写Dockerfile

创建Dockerfile文件，编写以下内容，注意：

  • CMD[]中的SERVER_BASE_URL是在Docker镜像启动时，传入的参数，这样更方便。
  • 其中：SERVER_BASE_URL，在三处出现，一是Dockerfile，一个是main.js，另一个是docker启动时传入的环境变量。
FROM node:lts-alpine as builder-stage
WORKDIR /app
COPY package*.json ./
RUN npm install --registry https://registry.npm.taobao.org
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
# COPY nginx.conf /etc/nginx
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

COPY --from=builder-stage /app/dist /usr/share/nginx/html

# CMD ["nginx", "-g", "daemon off;"]
CMD ["sh", "-c", "sed -i \"s|<body>|<body SERVER_BASE_URL=\"$SERVER_BASE_URL\">|\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]

2.3 编写nginx.conf

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

2.4 项目中main.js配置

import { createApp } from "vue";
import App from "./App.vue";

const SERVER_BASE_URL = document.querySelector("body").getAttribute("SERVER_BASE_URL");
// 处理来自于外界配置的参数，例如：URL地址
console.log("SERVER_BASE_URL=", SERVER_BASE_URL);

createApp(App).mount("#app");

2.5 构建镜像

cd vue-test
docker build -t vue-test:1.0 .

构建过程类似如下：
[root@drccentosserver02 vue-test]# docker build -t vue-test:1.0 .
Sending build context to Docker daemon  1.146MB
Step 1/11 : FROM node:lts-alpine as builder-stage
 ---> 28fd30c24deb
Step 2/11 : WORKDIR /app
 ---> Using cache
 ---> fac780ee2007
Step 3/11 : COPY package*.json ./
 ---> Using cache
 ---> d66cb7cc96ca
Step 4/11 : RUN npm install --registry https://registry.npm.taobao.org
... ...
Removing intermediate container 64510cdf3751
 ---> e283243687d1
Step 7/11 : FROM nginx:stable-alpine as production-stage
 ---> 373f8d4d4c60
Step 8/11 : RUN rm /etc/nginx/conf.d/default.conf
 ---> Using cache
 ---> 2fe5f597464c
Step 9/11 : COPY nginx/nginx.conf /etc/nginx/conf.d
 ---> f4fb9b0f62be
Step 10/11 : COPY --from=builder-stage /app/dist /usr/share/nginx/html
 ---> e1711c8e9a65
Step 11/11 : CMD ["sh", "-c", "sed -i \"s|<body>|<body VUE_APP_BASE_API=\"$VUE_APP_BASE_API\">|\" /usr/share/nginx/html/index.html; nginx -g \"daemon off;\""]
 ---> Running in 299d74cb19b0
Removing intermediate container 299d74cb19b0
 ---> c51e5d07ccfb
Successfully built c51e5d07ccfb
Successfully tagged vue-test:1.0

2.6 运行docker镜像

sudo docker run -e TZ=Asia/Shanghai -d --restart=always \
-p 9999:80 \
--name vuetest \
-e SERVER_BASE_URL=http://2.8.1.2:8001/ \
--log-opt max-size=10m \
--log-opt max-file=1 \
vue-test:1.0

2.7 验证

VUE_APP_BASE_URL: 后台通信端URL
例如：浏览器输入 http://ip:9999
如下图所示，红框处为docker启动时，传入的可变参数。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表