目录
准备工作:
电脑安装了node.js
配置了vue-cli 环境
远程服务器上安装了docker
有远程连接和文件上传的工具
配置了端口暴露
一、安装镜像
- 如何选择 node.js 的 Docker 镜像?
- 这里根据本地vue项目的node版本选择node:14.17.0-alpine进行演示:
#拉取镜像
docker pull node:14.17.0-alpine
#列出本地镜像
docker images
二、创建Dockerfile文件构建容器
Dockerfile:用来构建Docker镜像的文本文件,是由一条条构建镜像所需的指令和参数构成的脚本。
1、添加Dockerfile文件
国内的环境安装node-sass有点困难,可以直接通过淘宝的npm镜像来安装
# 设置基础镜像
FROM node:14.17.0-alpine
# 定义作者
MAINTAINER ppwq
#下载仓库为淘宝镜像
RUN npm config set registry https://registry.npm.taobao.org \
&& npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
2、上传文件
Dockerfile 文件,放在与dist目录所在的同一个目录下
3、构建镜像
上传文件后,构建Vue程序的镜像(一定要到文件夹里,里面有dist 和Dockerfile文件,最后有一个"."注意)
#docker build -t imagename:tag .
docker build -t dockervue .
4、运行容器
#docker run --name='container-name' -p 本机端口:80 -d image-name:tag
docker run --name='hello_8056' -p 8056:80 -d dockervue :1.0
三、如何优化 Docker 镜像
手把手教你在Node.js项目中如何优化docker镜像-木庄网络博客
参考链接:
https://www.jb51.net/article/242324.htmhttps://www.jb51.net/article/242324.htm使用构建Docker镜像的方式部署Vue项目_那个男人他来了的博客-CSDN博客_docker构建vue镜像使用构建Docker镜像的方式部署Vue项目准备工作:自己电脑安装了node.js配置了vue-cli 环境远程服务器上安装了docker有远程连接和文件上传的工具(我使用的是Xshell于Xftp)配置了端口暴露(我使用的是阿里云的ECS需要进行安全组配置)build vue 项目#在vue的main.js的目录下执行npm run build命令npm run build执行完npm run build 命令就会生成多出一个dist目录,然后将该文件夹上传到远程服务
https://blog.csdn.net/weixin_43823108/article/details/109003849?ops_request_misc=&request_id=&biz_id=102&utm_term=docker%E9%83%A8%E7%BD%B2vue%E6%97%B6%E9%9C%80%E8%A6%81%E5%AE%89%E8%A3%85%E7%9A%84%E9%95%9C%E5%83%8F&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-109003849.142%5Ev9%5Epc_search_result_control_group,157%5Ev4%5Econtrol&spm=1018.2226.3001.4187