Docker部署前端Web项目

最新推荐文章于 2024-07-02 23:51:41 发布
最新推荐文章于 2024-07-02 23:51:41 发布
阅读量459 收藏 8
点赞数 5
文章标签： docker 前端 容器
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/oBoLuoChuiXue12/article/details/137590749
版权

整体思路

  1. 通过Docker拉取node镜像，编译web工程源码
  2. 通过Docker拉取nginx镜像，运行已经构建的应用程序
  3. 可变参数的配置问题：
    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启动时，传入的可变参数。

  1. 工程文档及源码参考

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实例探险
关注
Docker部署前端项目
SaRAku的博客
02-08 1267
参考1:Dockerfile参考2(写得更通俗易懂):Dockerfile** 推荐阅读：DockerFile详解 **如果有一天我们想要制作一个反复使用的镜像，每一次使用都要重新安装环境和配置很麻烦，但是使用Dockerfile就可以达到一次制作反复clone的效果了。只需要把步骤都写进一个文件里，然后让docker自己去实现就好了。Dockerfile其中的每一条指令都会构建出一层镜像，因此每一条指令就是用于描述该镜像如何构建。
Docker实战1-运行前端Vue项目
程序猿GTC
05-26 909
6 执行结束后可利用 docker ps 来查看刚刚的容器是否启动成功。本次运行了两个项目，一个是开源的镜像，一个是自己的前端项目镜像。10 如果容器生产错误了，可以删除容器，然后再重新run。编写Dockerfile文件和nginx.conf文件。keycloak是一个开源的用户验证框架。4 执行Dockerfile文件，构建。注意最后的点，不可缺少，表示当前目录。这个最简单了，一行命令搞定。2 在cmd切换到项目目录。5 根据上面的镜像运行容器。3 提前下载nginx。
docker部署前端项目-简单流程实操(nginx)
Axi的学习笔记
04-04 329
编写nginx.conf。
手把手教你用docker搭建一个前后端项目
2301_76378888的博客
02-03 491
用docker搭建一个前后端项目详细教程
三分钟学会使用 Docker 部署前端项目
weixin_42907150的博客
01-30 5590
Docker🐳 是一种容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以理解成一个更轻量级的虚拟机并且使用的是本机的操作系统。Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。对于前端而言，在 CI 环境中使用也更容易集成开发，测试与部署。比如可以为流水线(Pipeline)设置等任务，更好地把控项目质量。
使用Docker部署前端项目
u010935484的专栏
05-21 466
一、将jar包构建成docker镜像 1.将前端的包上传至linux目录 2.创建Dockerfile文件 vi Dockerfile 文件内容如下： #Nginx版本 FROM nginx:latest #将dist文件夹复制到nginx的目录里面 COPY dist/ /usr/share/nginx/html/ 3.执行docker构建镜像命令 #jrkj-web表示生成镜像的名称，（注意后面有个点.） docker build -t jrkj-web . 4.查看构建的镜像是否存在 d
docker部署前端项目
qq_41637458的博客
05-16 155
给项目编写Dockerfile FROM nginx EXPOSE 8888 COPY dist/ /usr/share/nginx/html/ COPY nginx.conf /etc/nginx/conf.d/default.conf USER root 给项目编写nginx.conf # user nginx; # worker_processes 1; # error_log /var/log/nginx/error.log warn; # pid /var/
使用docker容器来构建前端项目
龙哥的世界
04-18 1578
先说一下背景，所以作者所在组织的前端项目使用了自定义的前端组件，放在了cnpm搭建的仓库中，由于人员变动，源代码已经丢失，仓库也被销毁，只留了打包好的库，所以每次打包都非常麻烦，再加上使用了node-sass包，对node版本要求特别高，原来打包在jenkins主机上使用npm命令来打包，非常容易出错。后面我改用使用docker容器，使构建的环境每次都一样，避免了打包失败的情况。现在说一下步骤。 首先构建一个打包镜像，Dockerfile文件如下 FROM node:11 WORKDIR /user/
详解如何使用Docker部署一个web项目并打包成镜像文件
01-20
docker基本入门以后，可以试试打包docker镜像与dockerfile了 docker镜像 docker hub仓库有2类仓库，用户仓库和顶层仓库，用户仓库由docker用户创建的，顶层仓库由docker内部的人来管理的。仓库里存放的是镜像文件，...
docker部署nginx,挂载多个前端部署目录以及跨域问题解决方案.txt
05-28
为了节约成本，很多时候一台server 的nginx可能要部署多个前端的情况，本实例是在docker环境下部署两个前端，同时处理前端调用后端跨域问题，本示例为阿里云centos7 系统docker20.10.6环境下nginx1.19.5版本 ...
【Docker项目实战】使用Docker部署PS-web项目
最新发布
jks212454的博客
07-02 378
【Docker项目实战】使用Docker部署PS-web项目
《Docker》Docker完整部署Web应用（Vue+Node+MongoDB
2401_84411072的博客
04-29 551
/ latest代表最新版本，如果是指定版本这里填入对应的版本号，比如latest改为0.18，冒号不能删通过docker将最新一个版本的nginx安装包下载下来​。
教你怎么用Docker 部署前端
fafafaz的博客
01-23 1385
越来越多的前端团队选择用 Docker 部署前端项目，方法是将项目打包成一个镜像，然后在服务端直接拉镜像启动项目。这种方式可以忽略服务器环境差异，更容易做版本管理。但我们平常使用 Docker 拉取镜像时，默认会从Docker Hub这个公共仓库拉取。虽然 Docker Hub 也可以上传自己的镜像，但是上传后会对所有人开放，这对公司项目来说显然是不允许的。为此，Docker 官方提供了工具registry来帮助我们搭建私有镜像仓库，用于管理自己的镜像。
如何通过Docker启动Nginx部署前端项目，包括Nginx的详细配置和踩坑教程？
王伟的博客
07-01 1万+
首先说明一下，我的目标是要通过Docker拉取一个新的Nginx镜像然后启动Nginx，然后映射出来的浏览器的地址端口要为http://10.1.2.10:8989，当如果需要请求后端数据的时候，需要把数据转发到后端的ip端口为：http://10.1.2.10:8999。中间Nginx配置踩了好多坑 （1）首先你需要从DockerHub上拉取一个Nginx的官方镜像（这里我没有直接写Docker...
在 Docker 中完整部署 Web 应用
热门推荐
爱的叹息的专栏
09-05 1万+
摘自：http://mt.sohu.com/20160203/n436804289.shtml 　　一个完整的 Web 应用包含前端页面、数据库、后台逻辑等，按照一般流程去构建需要配置 Nginx、MySQL，以及后台服务器，运维涉及到的部分十分复杂。而 Docker 可以将这些东西（数据+服务）封装起来，虽然有些场合不建议数据和服务放在一起。本文就在一个 Docker 容器中完整部
【好文转发分享】如何使用Docker构建前端项目
AuroraFaye的博客
05-09 295
Docker单独部署前端项目和Node项目是非常便捷的，在这里分享一下Docker的使用，主要聊聊它的部署实践。（我是window10专业版安装Docker） 转发自：如何使用Docker构建前端项目 - herryLo - 博客园 Docker Docker是一种应用容器引擎技术，类似于虚拟机，不过它的实用性、通用性、便捷性更强，Docker容器可以说就是VM，不过占用资源更少，更轻量，通过操作系统级虚拟化方法，利用更加节省的硬件资源提供给用户更多的计算资源。 Docker容器是Linux 容
前端docker的基础配置和使用
weixin_44258964的博客
06-10 381
这里主要是前端使用docker的配置及基本使用方法
前端Docker部署实战
Primise7的博客
03-23 966
前端Docker部署实战 背景 最近公司架构大佬，一直在培训K8s，跟组内成员大佬，唠嗑的时候顺便提到了Dokcer，回想到接触docker还是17年的时候研究了一番，当时做了许多笔记，到现在为止已经在我的笔记里吃灰了好久。最近自己再弄以前买的服务器就打算操作一番。 前言 1 安装docker 环境准备 1. 需要会一点服务器基础知识。 2. Centos7. 3. 当前使用xshell操作 环境查看 # 系统内核 [root@iZbp1a48kwmva61kyrz5caZ ~]# un
docker部署前端vue项目
04-24
如果您选择使用Docker来部署Vue项目，可以使用Nginx Docker镜像作为Web服务器。 3. 在Dockerfile中定义镜像。可以使用以下命令来创建一个镜像： ``` FROM nginx:latest COPY dist/ /usr/share/nginx/html ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

利哥AI实例探险

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值