使用构建Docker镜像的方式部署Vue+node项目

 

目录

一、安装镜像

二、创建Dockerfile文件构建容器

1、添加Dockerfile文件

2、上传文件

3、构建镜像

4、运行容器

三、如何优化 Docker 镜像

 
准备工作：

    电脑安装了node.js

    配置了vue-cli 环境

    远程服务器上安装了docker

    有远程连接和文件上传的工具

    配置了端口暴露

一、安装镜像

• 如何选择 node.js 的 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镜像-木庄网络博客

参考链接：

Nodejs alpine 基础docker镜像构建_容器云 - UCloud云社区Nodejs alpine 基础docker镜像构建,1 系统环境 centos7 内核：3.10.0-514.26.2.el7.x86_64 安装docker要求内核版本不低于3.10 2 安装docker {代码...} 3 Nodejs 镜像选择 REPOSITORY TAG IMAGE ID CREATED SIZE docker.io/node 9.2.1-slim 69c9f929...https://www.ucloud.cn/yun/27162.html

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