Docker部署前端Web项目

最新推荐文章于 2024-04-29 20:15:05 发布

利哥AI实例探险

最新推荐文章于 2024-04-29 20:15:05 发布

阅读量329

点赞数 5

分类专栏： docker 文章标签： docker 前端容器

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/oboluochuixue12/article/details/137590749

版权

docker 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

整体思路

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

示例

整体目录结构如下：

[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

创建vue示例项目

vue create vue-test
cd vue-test

运行：npm run serve

编写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;\""]

编写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;
  }
}

项目中main.js配置

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

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

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

构建镜像

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

运行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

在这里插入图片描述

验证

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

工程文档及源码参考

Docker部署前端Web项目：

链接：https://pan.baidu.com/s/1PjKdTx9RHIaPthxTw31pgA?pwd=jvd2

er启动时，传入的可变参数。


[外链图片转存中...(img-vzacS0yQ-1712720929361)]

1. # 工程文档及源码参考

Docker部署前端Web项目：

链接：https://pan.baidu.com/s/1PjKdTx9RHIaPthxTw31pgA?pwd=jvd2 

提取码：jvd2

利哥AI实例探险

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Docker部署前端Web项目

链接：https://pan.baidu.com/s/1PjKdTx9RHIaPthxTw31pgA?er启动时，传入的可变参数。
复制链接

扫一扫

专栏目录