网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

CentOS服务器 部署前端项目

2021/4/28 18:54:11 人评论

CentOS服务器 部署前端项目安装 finalShell 连接服务器安装 docker(Docker Engine-Community社区版)Docker安装 nginx前端项目打包上传nginx代理安装 finalShell 连接服务器 地址 http://www.hostbuf.com/安装之后,如图操作 安装 docker(Docker Engine-Communi…

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
  1. 使用命令来设置稳定的仓库(官方源地址)
    yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
  1. 安装 Docker Engine-Community,containerd (最新版)
   yum install docker-ce docker-ce-cli containerd.io
  1. 启动 Docker
   systemctl start docker

Docker安装 nginx

  1. 安装最新版nginx镜像
   docker pull nginx:latest
  1. 查看本地nginx镜像
   docker images

在这里插入图片描述
如图所示已经成功安装nginx

  1. 运行容器
   docker run --name nginx-test -p 8080:80 -d nginx

参数说明:

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

在这里插入图片描述
如图所示操作成功

5.浏览器访问8080端口

在这里插入图片描述
如图所示操作成功

前端项目打包上传nginx代理

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

在这里插入图片描述

  1. 以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文件夹
  1. 查看docker容器配置成功没有
    在这里插入图片描述
  2. 浏览器访问8080端口 大功告成

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?