Docker + Nginx 部署vue3项目

配置:ubantu18.0.6版本;

一. docker的安装:

1.检查卸载老版本docker

ubuntu下自带了docker的库,不需要添加新的源。 但是ubuntu自带的docker版本太低,需要先卸载旧的再安装新的。

注:docker的旧版本不一定被称为docker,docker.io 或 docker-engine也有可能,所以我们卸载的命令为:

bash 复制代码
$ sudo apt-get remove docker docker-engine docker.io containerd runc

2.安装步骤

(1). 更新软件包

在终端中执行以下命令来更新Ubuntu软件包列表和已安装软件的版本:

sql 复制代码
sudo apt update
sudo apt upgrade

(2). 添加Docker官方GPG密钥

执行以下命令来添加Docker官方的GPG密钥:

arduino 复制代码
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -

(3). 添加Docker软件源

执行以下命令来添加Docker的软件源:

js 复制代码
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"

(4). 安装docker,执行以下命令来安装Docker:

arduino 复制代码
apt-get install docker-ce docker-ce-cli containerd.io

3.运行docker

(1). 我们可以通过启动docker来验证我们是否成功安装。命令如下:

sql 复制代码
systemctl start docker

(2). 安装工具

arduino 复制代码
apt-get -y install apt-transport-https ca-certificates curl software-properties-common

(3).重启docker

复制代码
service docker restart

(4).验证是否成功

复制代码
sudo docker version

运行命令后,结果如下:

二. docker配置nginx镜像

1. nginx的安装可参考以下博客:

bash 复制代码
 https://zhuanlan.zhihu.com/p/138007915

2. 在home下建立一下文件夹及子文件夹,用来待会挂载docker镜像中nginx容器的配置文件

3.进入该nginx文件夹下,启动以下指令:

(1)获取docker镜像列表:

bash 复制代码
docker images

(2)拉取nginx配置生成nginx的docker镜像:

bash 复制代码
docker pull nginx

(3)进入docker容器中查看所需挂载文件是否存在(容器中暂时称呼为容器环境,外部为宿主环境): 进入与退出容器:

bash 复制代码
docker run -it nginx bash #进入
exit   #退出

(4). 因为我们不可能每次项目更新都去更改容器中nginx的配置,所以需要把容器中nginx的配置挂载在宿主环境,后续只需要更改宿主环境nginx配置即可:

  • 复制容器中nginx配置文件于宿主环境:
bash 复制代码
docker cp 容器id: 容器naginx配置路径 宿主环境添加的路径
docker cp b4ceef0f6e91:/etc/nginx/nginx.conf /home/fronted-docker/nginx/conf/nginx.conf # nginx.conf复制
docker cp b4ceef0f6e91:/etc/nginx/conf.d/default.conf /home/fronted-docker/nginx/conf.d/default.conf # default.conf复制
  • 根据自己端口来配置default.conf文件:
bash 复制代码
vim default.conf

4. docker容器的创建启动及nginx的挂载:

(1). 把打包好的dist文件放入宿主环境的html下 (2). 容器的运行与配置文件挂载:端口号需与default.conf中的配置文件中一致

bash 复制代码
# docker run --name 自定义容器名 -d -p 宿主端口号:容器代理端口号
docker run --name mynginx -d -p 8082:8082 # mynginx: #自己命名的容器名,建议全部小写字母
-v /home/fronted-docker/nginx/html:/usr/share/nginx/html      #html文件夹的挂载
-v /home/fronted-docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  #nginx.conf文件的挂载
-v /home/fronted-docker/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf
-v /home/fronted-docker/nginx/logs:/var/log/nginx nginx           #nginx: 镜像名

(3).查看容器是否正常启动:

bash 复制代码
docker ps

现在通过ip:8082即可访问项目

5. 一些常用的docker指令:

  • 查看镜像列表:
bash 复制代码
docker images
  • 查看已经启动的容器:
bash 复制代码
docker ps
  • 停止容器运行:
bash 复制代码
docker stop 容器id
  • 删除容器(该指令执行必须先停止容器):
bash 复制代码
docker rm 容器id
  • 进入容器:
bash 复制代码
docker run -it 容器名或id bash
  • 删除所有已经停止的容器:
bash 复制代码
docker container prune
  • 删除镜像:
bash 复制代码
docker rmi 镜像id
相关推荐
aklry39 分钟前
uniapp三步完成一维码的生成
前端·vue.js
用户26124583401612 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川3 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术4 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再5 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了5 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂5 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷5 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401615 小时前
vue学习路线(10.监视属性-watch)
前端·vue.js
慧一居士6 小时前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js