在Docker中运行Vue.js项目(开发环境/生产环境)

Logo

新冠疫情自我检测系统网页设计开发文档

Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性、有效性、及时性和完整性,更多内容请查看国家卫健委网站!
Explore the docs »

View Demo · Report Bug · Request Feature

homepage

在Docker中运行Vue.js项目(开发环境/生产环境)

Next, we will run our Vue.js app in a Docker container.

Environment

Ubuntu18.04.4
Docker20.10.18
Docker Compose2.10.2

Installation

# Install using the convenience script
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh --mirror Aliyun
docker -v # 20.10.18
docker compose version # 2.10.2
# Change registry mirrors
vim /etc/docker/daemon.json
# input the following JSON: {"registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/", "https://registry.docker-cn.com"]}
sudo systemctl daemon-reload
sudo systemctl restart docker
docker info
# Registry Mirrors:
#  https://docker.mirrors.ustc.edu.cn/
#  https://registry.docker-cn.com/
sudo docker run hello-world
# Unable to find image 'hello-world:latest' locally
# latest: Pulling from library/hello-world
# 2db29710123e: Pull complete
# Status: Downloaded newer image for hello-world:latest
# Hello from Docker!
# This message shows that your installation appears to be working correctly.

Build Images and Run Containers of Vue.js App

We create Dockerfile for both ‘dev’ and ‘prod’ environment in the root folder of our project. Add a .dockerignore to speed up the Docker build process as our local dependencies and git repo will not be sent to the Docker daemon.

docs
images
README.md
.prettierrc
node_modules
.git
.gitignore
static/.gitkeep

Dev

We start by creating a Dockerfile.dev in the root folder of our project:

# Dockerfile.devFROM node:14.16.1WORKDIR /app# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH# overwrite Dev Server settings `host` in `config/index.js`
ENV HOST 0.0.0.0# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./# copy `patches` before npm runs post-install script
COPY patches ./patches# update npm and install project dependencies
RUN npm i npm@8.18.0 -g
RUN npm i vue-cli -g --legacy-peer-deps
RUN npm install --legacy-peer-depsEXPOSE 8080# configure anonymous volume in order to 
# use the container version of the “node_modules” folder
VOLUME "/app/node_modules"CMD ["npm", "run", "dev"]

ENV HOST 0.0.0.0 sets the environment variable HOST to the value 0.0.0.0, which overwrites Dev Server settings host in config/index.js. If you keep original settings host: 'localhost', our Vue.js app in a docker container will not be accessible from outside. By inspecting container exposed port docker container port dockerize-vuejs-app-dev, we get the output 8080/tcp -> 0.0.0.0:8080, which means the docker container are listening to inner port 0.0.0.0:8080 instead of localhost:8080. To be more specific, when apps run in a Docker container the IP 127.0.0.1 is assigned to the Docker container, not the host. Changing it to 0.0.0.0 will allow us to directly access the app from the host.

COPY patches ./patches aims at providing patches before npm runs post-install script. After patching, you will get the output: Applying patches... element-ui@2.15.9 ✔.

It may seem reduntant to first copy package.json and package-lock.json and then all project files and folders in two separate steps but there is actually a very good reason for that (spoiler: it allows us to take advantage of cached Docker layers).

Now let’s build the Docker image of our Vue.js app:

docker build -f Dockerfile.dev -t dockerize-vuejs-app:dev .

Finally, let’s run our Vue.js app in a Docker container:

docker run -it -p 8080:8080 -v ${PWD}:/app --rm --name dockerize-vuejs-app-dev dockerize-vuejs-app:dev

-v ${PWD}:/app mounts our code into the container at “/app” to enable “Hot Reload”. ${PWD} is /path/to/your/project, which may not work on Windows. ( See this Stack Overflow question for more info. )

You should be able to access our Vue.js app on localhost:8080 on your host machine. The logs are as follows:

 DONE  Compiled successfully in 12336ms                                                            3:04:24 AMI  Your application is running here: http://0.0.0.0:8080I  Your Express app is listening on port 8081N  © Sylvan Ding 2022 <sylvanding@qq.com>N  https://github.com/sylvanding/

Prod

For realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like NGINX or Apache and that is exactly what we are going to do next: we are about to leverage NGINX to serve our Vue.js app because it is considered to be one of the most performant and battle-tested solutions out there.

We refactor our Dockerfile.dev to use NGINX:

# Dockerfile.prod# build stage
FROM node:14.16.1 as build-stage
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package*.json ./
COPY patches ./patches
RUN npm i npm@8.18.0 -g
RUN npm i vue-cli -g --legacy-peer-deps
RUN npm install --legacy-peer-deps
COPY . .
RUN npm run build# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80CMD ["nginx", "-g", "daemon off;"]

Now let’s build the Docker image of our Vue.js app:

docker build -f Dockerfile.prod -t dockerize-vuejs-app:prod .

Finally, let’s run our Vue.js app in a Docker container:

docker run -it -p 80:80 --rm --name dockerize-vuejs-app-prod dockerize-vuejs-app:prod

We should be able to access our Vue.js app on http://localhost or http://yourPublibIPAddress. Note that you need to open 80 port in your firewall. To run a container in background, we use -d flag instead of --rm:

docker run -d -p 80:80 --name dockerize-vuejs-app-prod dockerize-vuejs-app:prod

Stop and remove that container:

docker rm -f dockerize-vuejs-app-prod

View Nginx Access Logs

Type the following command helps us view Nginx real-time access logs shown on the background container’s virtual screen:

docker attach --sig-proxy=false dockerize-vuejs-app-prod

What happens there?

  • docker attach attaches your terminal’s standard input, output, and error (or any combination of the three) to a running container using the container’s ID or name. This allows you to view its ongoing output or to control it interactively, as though the commands were running directly in your terminal.
  • --sig-proxy=false prevents CTRL-c from sending a SIGINT to the container. It allows you to detach from the container with a -d flag and leave it running Nginx continuously by using the CTRL-c key sequence.

转载请注明出处:©️ Sylvan Ding 2022

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/484523.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

所有竞争,本质都是“硬核能力”之争

来源&#xff1a;中科创星文 &#xff1a;君莫笑轮值主编&#xff1a;智勇 值班编辑 &#xff1a;金木研一、科技创新&#xff0c;是世界进步的第一推动力站在5000年后的今天&#xff0c;回首人类的发展进程&#xff0c;从石器时代—青铜时代—铁器时代—蒸汽时代—电气时代—信…

深度报告:芯片设计EDA 2.0时代,三大路径搞定六大挑战

编辑&#xff1a;智东西内参EDA是Electronic Design Automation的缩写&#xff0c;几十年来成为芯片设计模块、工具、流程的代称。从仿真、综合到版图&#xff0c;从前端到后端&#xff0c;从模拟到数字再到混合设计&#xff0c;以及工艺制造等&#xff0c;EDA工具涵盖了芯片设…

2018上海

转载于:https://www.cnblogs.com/kakaisgood/p/10158442.html

python-类方法和属性

#类方法&#xff0c;属性和迭代器 #为了类是新型的&#xff0c;应该把语句__metaclass__type放在模块的开始&#xff0c; #或者子类化内建类object class newtype(object):pass#构造方法&#xff1a;一个对象创建后&#xff0c;会立即调用构造方法&#xff0c;即__init__ class…

taro中子父传值

其实网上很多方法,我这只是一个简单的demo,废话不多说直接上代码 import Taro, { Component } from tarojs/taro import { View, Text } from tarojs/components import ./index.less//子组件 class Child extends Component{constructor(props) {super(props);this.state ({}…

如何计算感受野(Receptive Field)

深度神经网络中的感受野(Receptive Field) 本文转载自知乎&#xff1a;深度神经网络中的感受野(Receptive Field) - 蓝木达的文章 - 知乎 在机器视觉领域的深度神经网络中有一个概念叫做感受野&#xff0c;用来表示网络内部的不同位置的神经元对原图像的感受范围的大小。神经元…

物理学需要哲学,哲学需要物理学

来源&#xff1a;微信公众号“Philosophia 哲学社”撰文&#xff1a;卡洛罗威利&#xff08;Carlo Rovelli&#xff09;翻译&#xff1a;朱科夫「反对哲学」是一位当代伟大的物理学家——诺贝尔物理奖得主、基本粒子物理「标准模型」的奠基人斯蒂文温伯格&#xff08;Steven We…

[转帖]Oracle 11G RAC For Windows 2008 R2部署手册

Oracle 11G RAC For Windows 2008 R2部署手册&#xff08;亲测&#xff0c;成功实施多次&#xff09; https://www.cnblogs.com/yhfssp/p/7821593.html 总体规划 服务器规划 1、建议使用两台硬件配置一模一样的服务器来作为 RAC 环境的两个物理节点 2、服务器至少需要配置两块物…

生日快乐送女朋友的网页生日礼物模版

生日快乐送女朋友的网页生日礼物模版 Demo: http://sylvanding.online/happy-birthday-20221120 仓库&#xff1a;https://github.com/sylvanding/happy-birthday-20221120 参考 背景 https://codepen.io/arcs/pen/XKKYZW蛋糕 https://codepen.io/fixcl/pen/AaBNZB卡片 http…

美国独步世界的八大领域

来源&#xff1a;世界先进制造技术论坛一、美国诺贝尔奖获得者世界第一

Hinton的胶囊网络不太行?CVPR Oral论文:不比卷积网络更「强」

来源&#xff1a;机器学习研究组订阅在一篇 CVPR 2021 Oral 论文中&#xff0c;来自慕尼黑大学、微软亚研的研究者对胶囊网络和卷积网络进行了全面的对比。一系列实验表明&#xff0c;一些被认为对胶囊网络&#xff08;CapsNet&#xff09;至关重要的设计组件实际上会损害它的鲁…

数量庞大!中国成长型AI企业研究报告

来源&#xff1a;德勤Deloitte编辑&#xff1a;蒲蒲日前&#xff0c;德勤、英特尔和深圳人工智能行业协会联合发布《中国成长型AI企业研究报告》。该报告通过对数千家成长型AI企业数据的分析研究&#xff0c;几百家企业的走访以及和近百家优秀企业的深度合作&#xff0c;就中国…

除了芯片,我们还应关注这六大核心技术!

来源&#xff1a;疯狂机械控企业想发展自己还是需要掌握核心技术。除了芯片以外&#xff0c;还有哪些核心技术是我们重点关注的呢&#xff1f;01 软件定义机器▼设备智能化的体现就是典型的软件定义机器&#xff0c;包括机器轻松连接至互联网&#xff1b;将APP和分析结果嵌入机…

中国科学院院士褚君浩:第四次工业革命和智能时代

来源&#xff1a;信息化时代第一次工业革命起源于英国&#xff0c;以机械化为特征。第二次工业革命&#xff0c;以电气化为特征。第三次工业革命&#xff0c;以信息化为特征。现阶段&#xff0c;正值第四次工业革命&#xff0c;此次工业革命具有以下三个特征&#xff1a;信息科…

数据的描述统计量

一、本文简介   一组样本数据分布的数值特诊可以从三个方面进行描述&#xff1a; 1、数据的水平&#xff1a;也称为集中趋势或位置度量&#xff0c;反应全部数据的数值大小。 2、数据的差异&#xff1a;反应数据间的离散程度。 3、分布的形状&#xff1a;反应数据分布的偏度和…

Science:细胞如何测量自身的大小?答案是:DNA含量

图片显示的是一个茎尖分生组织(在中间)&#xff0c;在它的两侧出现了花蕾。绿色标记的细胞即将进入DNA复制。来源&#xff1a;生物通自从350多年前科学家在显微镜下发现细胞以来&#xff0c;他们就注意到每一种细胞都有其特有的大小。从微小的细菌到几英寸长的神经元&#xff0…

Windows 程序设计技巧

#include<iostream> #include<windows.h>using namespace std;int main() {int nSelect ::MessageBox(NULL,"windows 程序设计","测试",MB_OKCANCEL);if (nSelect IDOK){printf("OK!");}else{printf("Cancel!");}return…

兰德公司发布《美国5G时代》报告

来源&#xff1a;微信公众号科技咨询频道作者&#xff1a;谢黎、张志强&#xff0c;中国科学院成都文献情报中心兰德公司2021年5月24日发布《美国5G时代&#xff1a;在保障国家和人民的同时获得竞争优势》报告。报告援引美国国防创新委员会、联邦政府的观点&#xff0c;声称5G是…

40年诞生7位诺奖得主,美国贝尔实验室做对了什么?

贝尔实验室从1940年到1979年&#xff0c;共40年&#xff0c;历经4位总裁。这4位总裁在不同时期根据当时的形势&#xff0c;都提出了自己的管理方针&#xff0c;领导着该实验室近万名工作人员和几千名的科学家和工程师为世界和美国的科技发展作出了重要的贡献。来源&#xff1a;…

7-5 列车厢调度 (25 分)

7-5 列车厢调度 (25 分) 1 <--移动方向/ 3 \2 -->移动方向大家或许在某些数据结构教材上见到过“列车厢调度问题”&#xff08;当然没见过也不要紧&#xff09;。今天&#xff0c;我们就来实际操作一下列车厢的调度。对照上方的ASCII字符图&#xff0c…