Docker+Nginx部署Vue项目

CentOS 7部署Vue

一、虚拟机安装

1. 官网下载iso文件

https://www.centos.org/download/

2. VMware新建虚拟机

选择iso文件，一路点下去就好了

二、安装Nginx

1. 安装所需基本组件

yum install gcc-c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel

2.下载压缩包

wget -c https://nginx.org/download/nginx-1.12.0.tar.gz

3. 解压，编译，安装

tar -zxvf nginx-1.12.0.tar.gz

cd nginx-1.12.0

./configure

make && make install

4. 查看安装路径

whereis nginx

5. 启动nginx

cd /usr/local/nginx/sbin/
#启动
./nginx 
#关闭
./nginx -s stop

三、安装Docker

1.下载安装包

yum install -y yum-utils

2. 配置阿里云镜像仓库

yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3. 更新yum软件包索引

yum makecache fast

4. 安装Docker相关

yum install docker-ce docker-ce-cli containerd.io

5. 安装成功

docker version

6. 测试

sudo service docker restart

docker run hello-world

docker images

四、部署Vue项目

1. docker基本操作

#开机自启
systemctl enable docker

#拉取镜像
docker pull []
#查看镜像
docker images
#删除镜像
docker rmi j

#创建容器
docker run -d --name 镜像名 容器名
#查看容器
docker container ls
#停止容器
docker container stop 容器名
#删除容器
docker container rm 容器名

#部署容器
docker run -d -p 80:80  \
 --restart=always \
 --name nginxweb \
 -v /usr/local/docker/nginx/html:/usr/share/nginx/html \
 -v /usr/local/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /usr/local/docker/nginx/conf/conf.d:/etc/nginx/conf.d \
 -v /usr/local/docker/nginx/logs:/var/log/nginx \
 nginx 

2. docker中nginx读取文件的默认路径

• conf：/etc/nginx/nginx.conf

​ /etc/nginx/conf.d

• html：/usr/share/nginx/html
• logs：/var/log/nginx

3. 部署步骤

3.1. 在/usr/local下新建文件夹docker/nginx

cd /usr/local
mkdir docker
cd docker
mkdir nginx
cd nginx

3.2. 新建三个文件夹

mkdir conf
mkdir html
mkdir logs

3.3. 从容器中拷贝Nginx默认配置

#$PWD为当前目录全路径
docker cp nginx:/etc/nginx/nginx.conf $PWD/conf
docker cp nginx:/etc/nginx/conf.d $PWD/conf

3.4. 将页面静态资源（dist）拷贝到html下

3.5. 拉取nginx镜像

docker pull nginx:latest

3.6. 启动一个nginx容器

docker run -d --name nginx nginx

3.7. 部署容器

docker run -d -p 80:80  \
 --name nginxweb \
 -v /usr/local/docker/nginx/html:/usr/share/nginx/html \
 -v /usr/local/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
 -v /usr/local/docker/nginx/conf/conf.d:/etc/nginx/conf.d \
 -v /usr/local/docker/nginx/logs:/var/log/nginx \
 nginx 

-d 表示在一直在后台运行容
-p 80:80 对端口进行映射，将本地8081端口映射到容器内部的80端口
–name 设置创建的容器名
-v 将本地目录(文件)挂载到容器指定目录

3.8. 设置本机到虚拟机映射

VMware左上角 编辑 虚拟网络编辑器

3.9. 访问项目

网络和共享中心关闭防火墙

同一局域网通过配置的主机ip+端口，就能访问VMware中虚拟机的内容
-v 将本地目录(文件)挂载到容器指定目录

3.8. 设置本机到虚拟机映射

VMware左上角 编辑 虚拟网络编辑器

[外链图片转存中…(img-OwIGoDQG-1654257954878)]

[外链图片转存中…(img-wCV0hXsx-1654257954878)]

3.9. 访问项目

网络和共享中心关闭防火墙

同一局域网通过配置的主机ip+端口，就能访问VMware中虚拟机的内容