CentOS服务器 部署前端项目

• 安装 finalShell 连接服务器
• 安装 docker(Docker Engine-Community社区版)
• Docker安装 nginx
• 前端项目打包上传nginx代理

安装 finalShell 连接服务器

1. 地址 http://www.hostbuf.com/
2. 安装之后，如图操作
   
   
   

安装 docker(Docker Engine-Community社区版)

1. 使用 Docker 仓库进行安装
   设置仓库

     yum install -y yum-utils device-mapper-persistent-data lvm2

2. 使用命令来设置稳定的仓库(官方源地址)

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

3. 安装 Docker Engine-Community，containerd (最新版)

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

4. 启动 Docker

   systemctl start docker

Docker安装 nginx

1. 安装最新版nginx镜像

   docker pull nginx:latest

2. 查看本地nginx镜像

   docker images

如图所示已经成功安装nginx

3. 运行容器

   docker run --name nginx-test -p 8080:80 -d nginx

参数说明：

• –name nginx-test：容器名称
• -p 8080:80： 端口进行映射，将本地 8080 端口映射到容器内部的 80 端口
• -d nginx： 设置容器在在后台一直运行

4. 查看容器

   docker ps

如图所示操作成功

5.浏览器访问8080端口

如图所示操作成功

前端项目打包上传nginx代理

1. 停止之前8080端口的docker容器
   查看所有启动的容器

   docker ps

   docker stop 容器ID

2. 以vue为例子 将打包后的dist中文件上传到服务器
   在home文件夹新建一个文件夹demo 并打开

3. 上传打包文件


4. 重新启动刚才停止的8080端口容器并配置
切换到home文件夹

   cd /home
   docker run -d -p 8080:80 -v $PWD/demo:/usr/share/nginx/html nginx

说明：

• $PWD是指的当前路径
• demo 就是我刚才放打包后的文件的文件夹
• 注意：一定要切换到demo文件夹上级文件夹，也就是home文件夹

5. 查看docker容器配置成功没有
   
6. 浏览器访问8080端口 大功告成