docker - (1)使用docker部署前端项目

164 阅读2分钟

近期在学习docker相关知识,本文主要用于个人学习docker笔记。

准备工作

  1. 购买云服务器,设置密码,并且添加后续相关的安全组配置,以保证端口的正常访问,
  2. 终端 或者 Workbench远程连接,
    1. ssh @root<服务器公网ip地址>
    2. 输入密码
  1. 链接到服务器后,开始安装docker,安装完成后可以使用docker -v 检查一下是否安装成功。

nginx

  1. 首先需要拉取nginx镜像
    docker pull nginx:latest
    # 查看已安装镜像
    docker images 
  1. 运行nginx 容器
    docker run -d -p 80:80 -v /home/admin:/usr/share/nginx/html -v ngconf:/etc/nginx --name admin-nginx nginx
  • -d: 后台运行容器

  • -p 80:80: 将主机的 80 端口映射到容器的 80 端口

  • -v /home/admin:/usr/share/nginx/html: 将主机目录 /home/admin 挂载到容器的 /usr/share/nginx/html,方便文件同步和数据持久化。

  • -v ngconf:/etc/nginx: 数据卷映射,将 Nginx 的配置文件存储到数据卷 ngconf,便于管理和修改。

  • --name admin-nginx: 为容器命名为 admin-nginx

  • nginx: 指定 Nginx 镜像。

  1. 修改nginx 配置文件,打开并编辑 Nginx 的配置文件,可以在/var/lib/docker/volumes/ngconf/_data/ 下找到。
    listen       80;
    listen  [::]:80;
    server_name  www.xxxx.com; #设置域名

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html; # nginx 默认的静态文件地址
        index  index.html index.htm;
	# React 路由处理,任何非文件请求都重定向到 index.html
        try_files $uri $uri/ /index.html;
    }
  1. 重启nginx容器
    docker restart <容器名称:admin-nginx>

上传前端项目到服务器

1.打包前端项目

    npm run build:prod
  1. 将打包后的dist目录上传到服务器的/home/admin下
    scp -r ./dist/*  root@公网ip:/home/admin
    #输入密码
  1. 上传完成!浏览器直接访问域名即可!