前端学习:半小时学会本地Linux的Docker + Ngnix部署Vue纯前端项目(面向纯小白)

156 阅读2分钟

前文

在如今越来越卷的情况下,前端也很有必要掌握一些Linux的技术,今天我们来一起学习本地Centos7部署纯前端项目

(一)安装虚拟机镜像

1.选择Linux版本

image.png

其它直接下一步,直到

image.png

内存我们选择4G

image.png

网络选择

image.png

磁盘选择

image.png

(二)启动虚拟机,配置常规配置

1.设置网络和软件选择

网络打开,记得点击应用

image.png

image.png

(三)安装Docker

1.ping一下,测试网络是否能连接外网

2.查看是否安装docker

  • yum list installed | grep docker

3.有的话删除docker


yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-selinux \
                  docker-engine-selinux \
                  docker-engine \
                  docker-ce
  1. 更换yum源
yum-config-manager \ --add-repo \ https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

如图: image.png

之后输入

sed -i 's/download.docker.com/mirrors.aliyun.com\/docker-ce/g' /etc/yum.repos.d/docker-ce.repo

yum makecache fast

5.下载Docker

-yum install -y docker-ce

查看docker版本

image.png

6.启动docker

systemctl start docker  # 启动docker服务

systemctl stop docker  # 停止docker服务

systemctl restart docker  # 重启docker服务

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/475e4b7c0a3045b5ab5aab43f1a71d5f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=749&h=273&s=41870&e=png&b=ffffff)

(四)安装Ngnix 1.安装Ngnix

docker pull ngnix

2.查看是否安装成功

docker images

image.png

3.创建Nginx配置文件

# 创建挂载目录 
mkdir -p /home/zx/nginx/conf 
mkdir -p /home/zx/nginx/log 
mkdir -p /home/zx/nginx/html

4.将容器中的nginx.conf文件和conf.d文件夹复制到宿主机

# 生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/zx/nginx/conf/nginx.conf
# 将容器conf.d文件夹下内容复制到宿主机
docker cp nginx:/etc/nginx/conf.d /home/zx/nginx/conf/conf.d
# 将容器中的html文件夹复制到宿主机
docker cp nginx:/usr/share/nginx/html /home/zx/nginx/

image.png

5.将原Nginx容器删除,再运行一个新的Nginx服务

# 直接执行docker rm nginx或者以容器id方式关闭容器
# 找到nginx对应的容器id
docker ps -a
# 关闭该容器
docker stop nginx
# 删除该容器
docker rm nginx
 
# 删除正在运行的nginx容器
docker rm -f nginx


6.建立一个新容器

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

重启容器:

# 重启容器 docker restart nginx

访问自己的Linux的IP+配置的ngnix端口(默认80) 可以看到:

image.png

说明成功

(五)挂载前端项目

1.打包VUE前端项目

npm run build

2.将dist目录下所有文件拉取到/home/zx/nginx/html 目录下再重启容器(注意删除原先的html文件哈)

重启容器 docker restart nginx

最后,本文参考了这位大神的部署文章,大家可以去看一下

blog.csdn.net/zznnniuu/ar…