docker部署vue项目入门百科_docker入门基础

docker部署vue项目入门百科

编写Dockerfile

在项目根目录新建名为Dockerfile的文件, 并添加以下代码:

docker部署vue项目入门百科_docker入门基础

# build stage
# 拉取最小体积的node环境容器, 并安装cnpm (加快容器构建速度,npm比较慢)
FROM node:lts-alpine as build-stage
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org

# 进入容器的app目录, 然后拷贝当前目录(根目录)的所有文件到容器的当前目录中(/app)
WORKDIR /app
COPY . .

# 删除vue环境配置文件(主要想通过容器的环境变量来达到不同的环境切换,以及为了部署到阿里云的容器服务或华为云的容器服务时, 通过配置项来配置相关的环境变量, 如果不需要可自行删除以下这句代码)
RUN rm -f .env.*

ENV VUE_APP_TEST_VALUE="My test Value"

#在容器内build
RUN cnpm run build


# production stage
# 最后通过nginx部署build出来的文件(/dist)
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

创建镜像

编写好Dockerfile后, 则可通过docker命令创建一个docker镜像, 以下为参考指令:

docker build --no-cache -t vue-docker:1.0 .

启动容器

docker run -p 80:80 --name vue-docker1.0 vue-docker:1.0
海计划公众号
(0)
上一篇 2020/03/19 07:13
下一篇 2020/03/19 07:13

您可能感兴趣的内容

  • Visual Alchemist新手入门_基于Web的开源数据库图表制作和自动化工具

    Visual Alchemist新手入门 GitHub:https://github.com/prahladyeri/VisualAlchemist 简介描述:基于Web的开源数据…

    2020/03/10
  • 培训班出身的程序员为什么遭人嫌弃使用帮助_培训入门攻略

    这几年,由于it软件行业对人才的需求很大,很多传统行业也纷纷创办“互联网+”项目,加上app开发热潮,微信公众平台也催生了更多的就业岗位。于是it从业人员的薪水也随之水涨船高。同时it培训班也随雨后春笋般涌出,一个个打出的口号都很响。“0基础入学,三个月包就业”“毕业月入不过万,不收学费”“从前是你找工作,接下来是工作找你”真是人有多大胆,口号就有多不要脸。

    2020/03/20
  • 程序员每天都在使用的6个惊讶的软技能使用帮助_技能小白教程

    如果你想要开启作为web开发人员的职业生涯,那么你需要涉及的不仅仅是知道如何写代码。
    有一些通用的软技能几乎可用于每个领域——包括技术行业。
    成为软件开发人员涉及的不仅仅是编写代码。自从我开始我的第一份作为软件开发人员的工作之后,我很快就知道了这一点。如果你想要在这个领域茁壮成长的话,那么你需要学习“特定的技能系列”。
    你看,每一家公司都有一个大局。除了写代

    2020/03/21
  • imgResize基础知识教程_移动端H5图片压缩

    imgResize基础知识教程 GitHub:https://github.com/CommanderXL/imgResize 简介描述:移动端H5图片压缩 大体的思路是,部分 A…

    2020/03/11
  • JS常用设计模式基础知识入门_模式菜鸟教程网

    设计模式的定义:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案设计模式是前人解决某个特定场景下对而总结出来的一些解决方案。可能刚开始接触编程还没有什么经验的时候,会感觉设计模式没那么好理解,这个也很正常。有些简单的设计模式我们有时候用到,不过没意识到也是存在的。学习设计模式,可以让我们在处理问题的时候提供更多更快的解决思路。当然设计模式的应用也不

    2020/03/29
  • Js中toString( ) 与 valueOf( )方法、隐式转换使用说明_对象小白攻略

    说明所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成。解释toString( )方法的作用是:返回一个反映这个对象的字符串,而很多类都定义了不同版本的toString( )。({}.toString()); //=> “[object Objec

    2020/03/30
  • 十个最流行的前端 CSS 库使用教程_库小白攻略

    前端 CSS 库,可以帮助用户分担样式设计,从而显著提高原型制作速度;用户则可以凭借前端框架,更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择,本篇文章的主要内容就是关于那些目前最为流行且常用的框架。为什么要使用 CSS 库,而不选择自定义 CSS?简而言之,时间是一种宝贵的资源,我们不该把它浪费在样式的构建身上。从零开始构建 CSS

    2020/03/24
  • Repaintless.css入门教程_轻量级高性能的CSS3动画库

    Repaintless.css入门教程 官方网址:http://szynszyliszys.github.io/repaintless/ GitHub:https://github…

    2020/03/07
  • MySQL主从数据库同步延迟问题解决基础知识入门_延迟攻略教程

    MySQL的主从同步是一个很成熟的架构,优点为:①在从服务器可以执行查询工作(即我们常说的读功能),降低主服务器压力;②在从主服务器进行备份,避免备份期间影响主服务器服务;③当主服务器出现问题时,可以切换到从服务器。相信大家对于这些好处已经非常了解了,在项目的部署中也采用这种方案。但是MySQL的主从同步一直有从库延迟的问题,那么为什么会有这种问题。这种问题

    2020/03/30
  • javascript Es5面向对象和 Es6面向对象菜鸟攻略_对象使用帮助

    javascript es6之前的面向对象方法:一般使用构造函数来实现function Person (name, age) {this.name = name;this.age = age;
    }
    // 实现静态属性, into属性就是静态属性 因为它是用Person直接 . 属性名的
    Person.into = ‘abc’
    // 然后new 一个实例出来

    2020/04/03
  • 为什么 [‘1’, ‘7’, ‘11’].map(parseInt) 的结果是 [1, NaN, 3]?菜鸟指南_map小白基础

    Javascript 总是以超自然的方式执行我们的代码,这是一件很神奇的事情,如果不信的话,思考一下 [‘1’, ‘7’, ’11’].map(parseInt) 的结果是什么?你以为会是 [1, 7, 11] 吗?我都这么问了,那肯定不是:[‘1’, ‘7’, ’11’].map(parseInt)
    // 输出:(3) [1, NaN, 3]要理解为什么为

    2020/03/26
  • vectorlogozone小白常识_精美的知名产品的 SVG 图标

    vectorlogozone小白常识 官方网址:https://www.vectorlogo.zone/ GitHub:https://github.com/VectorLogoZ…

    2020/03/06
  • 表格中table-layout属性使用帮助_属性入门知识

    定义和用法tableLayout 属性用来显示表格单元格、行、列的算法规则。table-layout有三个属性值:auto、fixed、inherit。fixed:固定表格布局固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。通过使用固定表格布局

    2020/03/24
  • vue-router路由元信息meta小白攻略_meta使用指南

    1. 前言:
    在全局守卫beforeEach((to,from,next) => {…})中判断当前路由是否允许登录、是否需要身份认证、权限认证等,虽然可以采用路由匹配的方式 if(to.path === ‘/url’),很显然当需要验证的路由较多时,会增加太多的if判断,这不利于代码维护,此时可在定义路由的时候可以配置 meta 字段,通过设置一些属

    2020/03/31
  • node为什么不支持import?指南攻略_import基础入门

    nodejs采用的是CommonJS的模块化规范,使用require引入模块;而import是ES6的模块化规范关键字。想要使用import,必须引入babel转义支持,通过babel进行编译,使其变成node的模块化代码。node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,

    2020/03/24
  • 用Node.js编写内存效率高的应用程序小白入门_效率基础知识

    软件应用程序在计算机的主存储器中运行,我们称之为随机存取存储器(RAM)。JavaScript,尤其是 NodeJS (服务端 JS)允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题,因为糟糕的实现可能会阻塞在给定服务器或系统上运行的所有其他应用程序。C 和 C++ 程序员确实关心内存管理,因为隐藏在代码的每个角落都有可能出现可

    2020/03/20