使用构建Docker镜像的方式部署Vue项目
程序员文章站
2024-01-29 08:46:34
...
准备工作:
- 自己电脑安装了node.js
- 配置了vue-cli 环境
- 远程服务器上安装了docker
- 有远程连接和文件上传的工具(我使用的是Xshell于Xftp)
- 配置了端口暴露(我使用的是阿里云的ECS需要进行安全组配置)
-
build vue 项目
#在vue的main.js的目录下执行npm run build命令 npm run build
-
执行完npm run build 命令就会生成多出一个dist目录,然后将该文件夹上传到远程服务器上
-
编写Dockerfile 文件,放在与dist目录所在的同一个目录下,Dockerfile内容如下
# 设置基础镜像 FROM nginx # 定义作者 MAINTAINER tsz # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面 COPY dist/ /usr/share/nginx/html/
-
运行生成镜像的命令(一定要达到文件夹里 里面有dist 和Dockerfile文件,最后有一个"."注意)
#docker build -t imagename:tag . dockr build -t hello_world:1.0 .
-
运行镜像
#docker run --name='container-name' -p 本机端口:80 -d image-name:tag docker run --name='hello_8056' -p 8056:80 -d hello_world:1.0
-
访问成功 http://xxxx.xxxx.xxx:8056/#/
推荐阅读
-
使用构建Docker镜像的方式部署Vue项目
-
SpringBoot+Docker实现项目的Maven打包&镜像构建&容器中运行==简单自动化部署
-
Docker环境Jenkins自动部署Gradle构建的Docker项目
-
使用docker构建golang线上部署环境的步骤详解
-
浅谈使用Maven插件构建Docker镜像的方法
-
使用Docker来加速构建Android应用的基本部署思路解析
-
浅谈使用Maven插件构建Docker镜像的方法
-
Docker使用 Maven 插件构建镜像的方法
-
使用Alipay代码源,构建自己的Docker镜像
-
详解如何使用Docker部署一个web项目并打包成镜像文件