vue serve 部署 步骤说明
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
vue serve 部署 步骤说明的更多相关文章
- 【Vue】vue项目目录介绍 es6的导入导出语法 vue项目开发规范 Vue项目编写步骤
目录 昨日回顾 今日内容 0 vue-cli创建项目 node.js环境 创建vue-cli项目 1 vue项目目录介绍 node_modules index.html app.vue package ...
- Storm集群安装部署步骤【详细版】
作者: 大圆那些事 | 文章可以转载,请以超链接形式标明文章原始出处和作者信息 网址: http://www.cnblogs.com/panfeng412/archive/2012/11/30/how ...
- unison + inotify 实现文件实时双向同步部署步骤
unison + inotify 实现文件实时双向同步部署步骤 一. Unison简介 Unison是Windows.Linux以及其他Unix平台下都可以使用的文件同步工具,它能使两个文件夹(本地或 ...
- Hexo学习笔记--常用命令及部署步骤
参考资料: Hexo搭建Github静态博客:http://www.cnblogs.com/zhcncn/p/4097881.htmlHexo:独立博客新玩法:http://www.aips.me/h ...
- SharePoint2010 部署步骤“激活功能”中出现错误:无法启动计算机“PCName”上的服务SPUserCodeV4
在SharePoint2010开发中,选择部署类型为“部署为沙盒解决方案”,在部署代码是出现如下错误提示: 部署步骤“激活功能”中出现错误:无法启动计算机“PCName”上的服务SPUserCodeV ...
- Storm集群安装部署步骤
本文以Twitter Storm官方Wiki为基础,详细描述如何快速搭建一个Storm集群,其中,项目实践中遇到的问题及经验总结,在相应章节以"注意事项"的形式给出. 1. Sto ...
- Thinkphp框架部署步骤
Thinkphp框架部署步骤 thinkphp框架部署起来简单,但是由于步骤较多也容易遗忘: 这是安装了集成环境后的一个www根目录结构: 然后需要在这个目录下面创建一个文件夹做项目:thinkphp ...
- node vue 项目部署问题汇总
场景:vue-router为history模式,不带项目名访问的部署,如果资源是用相对路径加载,则资源匹配路径不对 一.带项目名称访问,如部署到tomcat服务上 webpack: build/ut ...
- Vue脚手架使用步骤 2.9.6版本
转载自:https://blog.csdn.net/sky_LQ/article/details/80729547 Vue脚手架使用步骤 2018年06月19日 12:10:35 sky_LQ 阅读数 ...
- 阿里云CentOS 7.4 64位,jdk1.6、mysql5.7、tomcat6部署步骤(个人记录)
jdk1.6.mysql5.7.tomcat6部署步骤 一.安装jdk1.6 查看当前系统jdk的版本:java -version 方法一:利用yum源来安装jdk(此方法不需要配置环境变量) 查看y ...
随机推荐
- MSSQL慢查询查询与统计
查询MSSQL慢查询: SELECT TOP 20 TEXT AS 'SQL Statement',last_execution_time AS 'Last Execution Time' ,(tot ...
- AT_abc318_g 题解
因为是图上路径是否经过某个点的问题,所以考虑建出圆方树,然后根据圆方树的性质,\(a\) 到 \(c\) 存在经过 \(b\) 的路径等价于 \(a,c\) 在圆方树上的路径经过 \(b\) 或者 \ ...
- 记录荒废了三年的四年.net开发的第一次面试
对象 身在成都小微企业,前两天面试深圳老牌金蝶公司.对我这个荒废了三年光影的人来说,怎一个跨度之大了得?作为人我生第一次面试的,整个面试过程,只能用诡异来形容这次感受.而结尾也是迷迷糊糊中草草收场. ...
- Microsoft宣布将在开发人员会议上专注于.NET Aspire
2024年7月15日微软宣布,其开发执行团队将在下个月的开发者大会上聚焦于使用 .NET Aspire 的云原生开发,以及结合人工智能的"现代 SQL"在 Microsoft Fa ...
- [rCore学习笔记 08]内核第一条指令
了解QEMU 启动指令 qemu-system-riscv64 \ -machine virt \ -nographic \ -bios ../bootloader/rustsbi-qemu.bin ...
- P10245 Swimming Pool题解
P10245 Swimming Pool 题意 给你四条边 \(abcd\),求这四条边是否可以组成梯形. 思路 这显然是一道简单的普通数学题. 判断是否能构成梯形只需看四条边是否能满足,上底减下底的 ...
- 【VMware VCF】VMware Cloud Foundation Part 03:准备 Excel 参数表。
VMware Cloud Foundation 使用 VMware Cloud Builder 工具完成自动化以及标准化的部署,除了要准备必须的用于部署管理域并运行管理相关组件的 ESXi 主机以外, ...
- Pycharm+pytest+allure打造高逼格的测试报告
环境前置提示:allure是基于Java的一个程序,需要Java1.8的环境,没有安装需要去安装一下. 如果在cmd中能输入java,获取到命令信息则不管,否则需要配置系统变量: 路径:计算机> ...
- RedisTemplate使用rightPushAll时的注意事项
问题:第一次使用时rightPushAll,我以为这个方法就是直接把我们集合中的数据全部添加到redis的list里面,但是如果直接使用ArrayList类型添加,发现事情并不是我们想的这样,他并没有 ...
- 【MUI】工作总结
1.快速创建页面结构: mDoctype HTML: <!doctype html> <html lang="en"> <head> <m ...