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. .Net Core WebApi 使用 JWT 验证身份

    .h2 { background-color: rgba(78, 110, 242, 1); color: rgba(255, 255, 255, 1); padding: 10px } 一.注册身份 ...

  2. 记一次aspnetcore发布部署流程初次使用k8s

    主题: aspnetcorewebapi项目,提交到gitlab,通过jenkins(gitlab的ci/cd)编译.发布.推送到k8s. 关于gitlab.jenkins.k8s安装,都是使用doc ...

  3. python使用flask框架生成excle返回前端(包含图片、表格、表头灰色、表格加边框)

    python使用flask框架生成excle文档,文档中包含图片和表格,其中表格要包含图片.表格.表头灰色.表格加边框,照片和表格不重叠. 逻辑:获得图片的高度,根据高度计算表格从第几行开始插入. 效 ...

  4. 设置Docker容器里的时间

    启动容器时,添加环境变量 docer run -e TZ=Asia/Shanghai --rm myalpine date -e TZ=Asia/Shanghai  

  5. yb课堂之高并发项目必备利器之分布式缓存和本地缓存 《十九》

    什么是缓存? 程序经常要调用的对象存储在内存中,方便其使用时可以快速调用,不必去数据库或者其他持久化设备中查询,主要就是提高性能 DNS.前端缓存.代理服务器缓存Nginx.应用程序缓存(本地缓存.分 ...

  6. AI生成前端组件的价值思考

    想法来源 这个想法来源于我自己的需求,我自己首先就是最精准的目标用户,在这个AI时代,我希望AI可以帮我尽量多地干活. 结合自己的日常独立开发情况,发现花在调前端组件样式上的时间很多,因此思考能不能让 ...

  7. 轻松掌握useAsyncData获取异步数据

    title: 轻松掌握useAsyncData获取异步数据 date: 2024/7/12 updated: 2024/7/12 author: cmdragon excerpt: 摘要:本文详细介绍 ...

  8. QAnything AI开源的企业级本地知识库问答解决方案,致力于支持任意格式文件或数据库的问答

    QAnything AI简介 QAnything ai是一个本地知识库问答系统,旨在支持多种文件格式和数据库,允许离线安装和使用.您可以简单地删除任何格式的任何本地存储文件,并获得准确.快速和可靠的答 ...

  9. oeasy教您玩转vim - 34 - # 查找进阶

    ​ 查找进阶 回忆上节课内容 上次是搜索,是全文搜索 和我们以前的行内有点像 / 正向,? 反向 n 保持方向,N 改变方向 hls 让搜索结果高亮 wrapscan 可以从头搜索 noh 取消本次高 ...

  10. Masked Popcount 题解

    背景 罚了一发,太菜了.为什么我终于有时间的时候她要考试? 题意 给你 \(n,m\),问 \(\sum_{i=0}^{n}popcount(i \&m)\). 其中 \(\&\) 代 ...