基于docker与nginx部署前端web项目

2,761 阅读2分钟

基于docker与nginx部署前端web项目

image

首先准备一台服务器(腾讯云或者阿里云等等)

环境部署与准备

1.安装liunx系统, 一般可以选择CentOS或者Ubuntu 购买时自选即可,会自动安装选择的系统, 下面介绍将由阿里云服务器举例

image.png

2.安装docker环境与docker-compose命令

关于docker的介绍可以参考阮一峰大大的文档

2.1 docker安装可以参照官网的参照谷歌搜索的方法安装, 也可以选择系统的时候安装自带docker运行环境的系统    

image.png

// 安装docker-compose  要安装其他版本的Compose,可以将1.24.1替换为要安装的Compose版本
sudo curl -L https://github.com/docker/compose/releases/download/1.24.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
// 添加运行权限
sudo chmod +x /usr/local/bin/docker-compose
// 查看docker-compose版本
docker-compose --version

3. 打包前端项目,这边以vite创建的项目为例, 运行yarn build即可生成默认打包文件dist文件夹

image.png

4. 创建docker-compose.yaml文件,此文件是docker-compose的配制文件, 关于配置详解可以参考文档

version: '2.0'
services:
  website:
    # 用来指定一个包含Dockerfile文件的路径。一般是当前目录. 。Fig将build并生成一个随机命名的镜像
    build: .
    # 镜像
    image: wkqb-web:0.0.1
    # 容器名称
    container_name: wkqb-web
    # 指定与部署和运行服务相关的配置(restart: always关机或者重启docker同时重启容器)
    restart: always
    # 挂载目录
    volumes: 
      -  ./dist:/wkqb-web/dist
      -  ./nginxconf:/etc/nginx/conf.d
    # 添加环境变量
    environment:
        BACKENDURL: "http://39.108.82.140:7001"
    # 映射端口 将1307端口映射到主机80端口
    ports:
      - "1307:80"
    # 覆盖容器启动后默认执行的命令
    command: "/bin/bash -c \"envsubst < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'\""

image.png

5.创建文件nginxconf并且在该文件夹中创建default.conf.template文件,此文件为nginx配置, 更多配置大家可以自行百度

server {
    listen       80;
    server_name  localhost;

    # gzip 压缩,能提高加载速度,但会损耗一定的 cpu,对于访问量大的站点应当关闭,改为编译时压缩
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 8k;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;

    #charset koi8-r;
    access_log  /var/log/nginx/wkqb.access.log  main;
    error_log  /var/log/nginx/wkqb.error.log  warn;

    # 根路径响应 app.html
    location / {
        root   /wkqb-web/dist/;
        index  index.html;
    }
    # 代理
    location /api {
        proxy_pass ${BACKENDURL};
    }
}

创建文件Dockerfile, Dockerfile是一个包含用于组合映像的命令的文本文档。可以使用在命令行中调用任何命令。 Docker通过读取Dockerfile中的指令自动生成映像。更多配置详情可参考文档

# docker环境请使用这个包,以 nginx + 静态文件 方式部署
# FROM:指定基础镜像,必须为第一个命令
FROM nginx:1.17.5
# WORKDIR:工作目录,类似于cd命令
WORKDIR /wkqb-web

6. 登陆云服务器, 将web项目中 dist 文件夹 nginxconf文件夹已经docker-compose.yaml Dockerfile文件添加到压缩包(也可以不压缩)

image.png

7. 创建一个文件夹用来存放该压缩包(命名最好为web项目名称)

mkdir wkqb-web // 创建文件夹

8. 将文件导入到上面创建的文件夹中

导入方式有多种,可以使用WinSCP xftp 6工具等, rz命令等等

// rz命令安装 
// rz:从本地上传文件至服务器
//sz filename:从服务器下载文件至本地
yum install lrzsz // centOS
sudo apt-get install lrzsz // Ubuntu

// 进入文件夹
cd wkqb-web/
// 文件上传
rz -b
// 文件解压
unzip wkqb-web.zip

使用docker-compose up -d 该命令可以自动完成包括构建镜像,(重新)创建服务,启动服务,并关联服务相关容器的一系列操作。

image.png     

最好输入服务器http://${服务器ip}:1307 即可访问


项目迭代与更新

编码结束后重新打包代码,替换服务器中web代码文件

// 查看 docker 容器
docker ps
// 停止某个docker容器
docker stop ${CONTAINER ID}
// 重新运行容器
docker-compose up -d

image.png

祝大家周末快乐