1. 构建镜像

  docker build -t 镜像名称:镜像TAG --build-arg URL=http://localhost:8081 --build-arg PORT=2000 --build-arg SSL_PORT=443 -f Dockerfile .

  如果不运行https,则要把最后的-S 指定证书与SSL_PORT注释掉

Dockerfile内容如下:

FROM node:14.17.0-alpine
ARG URL=http://localhost:8080/
# 设定URL变量初始值为:http://localhost:8080/
ENV URL ${URL}
# 获取传递的动态URL变量值
RUN echo ${URL}
# 打印动态URL变量值
RUN export NODE_OPTIONS=--max_old_space_size=8172
# 设定临时环境变量
RUN mkdir -p /app
# 在镜像内根目录下 创建文件夹app
COPY ./package.json /app/package.json
# 将执行当前构建命令所在的path的同级package.json文件 复制到镜像内app文件夹中
ARG PORT=3000
# 设定PORT变量初始值为:3000,即http服务的端口
ENV PORT ${PORT}
# 获取传递的动态PORT变量值,即https服务的端口
ARG SSL_PORT=443
# 设定SSL_PORT变量初始值为:443
ENV SSL_PORT ${SSL_PORT}
# 获取传递的动态SSL_PORT变量值
RUN npm config set registry https://registry.npm.taobao.org \
&& npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass \
&& npm install -g serve
# npm设定淘宝镜像源地址
# 依赖可使用serve或http-server
# RUN npm install -g http-server RUN cd /app \
&& npm install
# 进入app文件夹下,执行npm install命令
COPY ./ /app
# 将执行当前构建命令所在的path同级的所有文件 复制到镜像内app文件夹中
WORKDIR /app
# 指定WORKDIR 工作目录
# RUN mv /node_modules /app/ 如果本地有依赖,且部署环境与当前构建镜像的环境一致
# 则可在当前构建环境中执行 npm install, 然后将依赖文件夹复制到app文件夹中
CMD cd /app \
&& npm run build \
&& serve -S --ssl-cert ./certificate/server.crt --ssl-key ./certificate/server.key -p ${SSL_PORT} dist \
&& serve -p ${PORT} dist
# 打包
# https 运行(需要证书)
# http 运行
EXPOSE ${SSL_PORT} ${PORT}

Dockerfile相关:

将当前路径下的xxx文件夹copy到镜像内部,add当前路径下指定的.txt文件,复制到镜像内部,并改名为app.txt

WORKDIR /home/root
USER root
COPY ./xxx/* ./xxx/
ADD ./*.txt app.txt

  

 node-sass地址:
https://registry.npmmirror.com/binary.html?path=node-sass/

vue serve 部署 步骤说明的更多相关文章

  1. 【Vue】vue项目目录介绍 es6的导入导出语法 vue项目开发规范 Vue项目编写步骤

    目录 昨日回顾 今日内容 0 vue-cli创建项目 node.js环境 创建vue-cli项目 1 vue项目目录介绍 node_modules index.html app.vue package ...

  2. Storm集群安装部署步骤【详细版】

    作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2012/11/30/how ...

  3. unison + inotify 实现文件实时双向同步部署步骤

    unison + inotify 实现文件实时双向同步部署步骤 一. Unison简介 Unison是Windows.Linux以及其他Unix平台下都可以使用的文件同步工具,它能使两个文件夹(本地或 ...

  4. Hexo学习笔记--常用命令及部署步骤

    参考资料: Hexo搭建Github静态博客:http://www.cnblogs.com/zhcncn/p/4097881.htmlHexo:独立博客新玩法:http://www.aips.me/h ...

  5. SharePoint2010 部署步骤“激活功能”中出现错误:无法启动计算机“PCName”上的服务SPUserCodeV4

    在SharePoint2010开发中,选择部署类型为“部署为沙盒解决方案”,在部署代码是出现如下错误提示: 部署步骤“激活功能”中出现错误:无法启动计算机“PCName”上的服务SPUserCodeV ...

  6. Storm集群安装部署步骤

    本文以Twitter Storm官方Wiki为基础,详细描述如何快速搭建一个Storm集群,其中,项目实践中遇到的问题及经验总结,在相应章节以"注意事项"的形式给出. 1. Sto ...

  7. Thinkphp框架部署步骤

    Thinkphp框架部署步骤 thinkphp框架部署起来简单,但是由于步骤较多也容易遗忘: 这是安装了集成环境后的一个www根目录结构: 然后需要在这个目录下面创建一个文件夹做项目:thinkphp ...

  8. node vue 项目部署问题汇总

    场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack:  build/ut ...

  9. Vue脚手架使用步骤 2.9.6版本

    转载自:https://blog.csdn.net/sky_LQ/article/details/80729547 Vue脚手架使用步骤 2018年06月19日 12:10:35 sky_LQ 阅读数 ...

  10. 阿里云CentOS 7.4 64位,jdk1.6、mysql5.7、tomcat6部署步骤(个人记录)

    jdk1.6.mysql5.7.tomcat6部署步骤 一.安装jdk1.6 查看当前系统jdk的版本:java -version 方法一:利用yum源来安装jdk(此方法不需要配置环境变量) 查看y ...

随机推荐

  1. Lambda表达式常见用法

    Lambda介绍 Lambda,别名函数式编程 函数式编程是一种编程范式.它把计算当成是数学函数的求值,从而避免改变状态和使用可变数据.它是一种声明式的编程范式,通过表达式和声明而不是语句来编程. L ...

  2. Mac mysql 5.7.x 设置服务开机自启动

    在终端输入 sudo vi /Library/LaunchDaemons/com.mysql.mysql.plist 输入以下内容 <?xml version="1.0" e ...

  3. Dubbo依赖

    项目依赖 Dubbo依赖 <!--Dubbo依赖--> <dependency> <groupId>com.alibaba</groupId> < ...

  4. 通俗讲解promise

        JavaScript 中的 Promise 是一种特殊的对象,它用于解决异步编程中的复杂性问题,特别是回调的问题.我们可以把它比喻成现实生活中的一个"承诺": 想象一下,你 ...

  5. 解码 xsync 的 map 实现

    解码 xsync 的 map 实现 最近在寻找 Go 的并发 map 库的时候,翻到一个 github 宝藏库,xsync (https://github.com/puzpuzpuz/xsync) . ...

  6. 2024NOI联合省选游记

    人生当中成功只是一时的,而失败却是主旋律. 不太好的的阅读体验 本文作者:xxxalq 所谓游记,顾名思义就是指游玩所记,所以重点在玩而不在省选. 由于没有参加 \(\text{NOIP}\),导致我 ...

  7. httpclient,轻量级idea集成测试工具

    优点:不用新开一个网页,具有测试数据保存功能,不需要配置即用(对比swagger)     不会特别占内存(对比postman) 使用方法:idea中安装插件 controller方法中点击 选择对应 ...

  8. 2023/4/16 SCRUM个人博客

    1.我昨天的任务 大体学习并了解初始化pyqt5的一些可视化问题 2.遇到了什么困难 对于py的字典使用 3.我今天的任务 学习了easydict库的基本操作

  9. 一键导入抓包数据生成HTTP请求

    Jmeter一键导入抓包数据生成HTTP请求.路径:工具->Import from cURL 在弹框里粘贴cURL,点击"Create Test Plan"会自动生成HTTP ...

  10. Gartner web3 的未来市场前景

    内行人叫web3 外行人叫元宇宙 元宇宙(Metaverse) Gartner将元宇宙定义为一个由通过虚拟技术增强的物理和数字现实融合而成的集体虚拟共享空间.这个空间具有持久性,能够提供增强沉浸式体验 ...