前文
在如今越来越卷的情况下,前端也很有必要掌握一些Linux的技术,今天我们来一起学习本地Centos7部署纯前端项目
(一)安装虚拟机镜像
1.选择Linux版本
其它直接下一步,直到
内存我们选择4G
网络选择
磁盘选择
(二)启动虚拟机,配置常规配置
1.设置网络和软件选择
网络打开,记得点击应用
(三)安装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
- 更换yum源
yum-config-manager \ --add-repo \ https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
如图:
之后输入
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版本
6.启动docker
systemctl start docker # 启动docker服务
systemctl stop docker # 停止docker服务
systemctl restart docker # 重启docker服务

(四)安装Ngnix 1.安装Ngnix
docker pull ngnix
2.查看是否安装成功
docker images
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/
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) 可以看到:
说明成功
(五)挂载前端项目
1.打包VUE前端项目
npm run build
2.将dist目录下所有文件拉取到/home/zx/nginx/html 目录下再重启容器(注意删除原先的html文件哈)
重启容器 docker restart nginx