单体部署⑦——前端部署

一、常规部署

(1). 安装nginx

Warning

注意：apt下载太慢的话，建议换阿里云源，请自行百度or谷歌

使用apt安装

sudo apt install nginx

路径介绍
/usr/sbin/nginx：主程序
/etc/nginx：存放配置文件
/usr/share/nginx：存放静态文件
/var/log/nginx：存放日志
启动nginx

service nginx start

验证是否成功

在浏览器输入你的ip地址，如果出现Wellcome to nginx 那么就是配置成功

(2). 部署

下载本项目，git clone或者download zip
前提是本地有vue-cli4与npm，请自行百度下载
然后在当前hoj-vue文件夹的src路径运行打包命令

npm run build

打包成功会在src同文件夹内有个dist文件夹，复制里面的html和css等静态文件
在云服务器上创建文件夹

mkdir -p /hoj/www/html

然后将这些静态文件复制到里面即可。

再将另外一个滚榜的前端文件夹也放到指定的文件夹，先去下载文件夹scrollBoard, 然后在服务器上创建文件夹/hoj/www/scrollBoard，将下载好的文件夹scrollBoard的内容复制进去。

mkdir -p /hoj/www/scrollBoard

然后将这些静态文件复制到里面即可

配置nginx，在安装好nginx后，修改nginx.conf配置

sudo vi /etc/nginx/nginx.conf

将下面的内容复制进去

注意：没有域名使用IP+端口号也一样

server{
    listen 80;  # 监听访问的端口号
    server_name www.hcode.top;  # 此处填写你的域名或IP
    root /hoj/www/html;   # 此处填写你的网页根目录
    location /api{
              proxy_set_header X-Real-IP $remote_addr;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header   Host                 $http_host;
              proxy_set_header   X-Forwarded-Proto    $scheme;
              proxy_pass http://localhost:6688; # 填写你的后端地址和端口
     }
     location ~ .*\.(js|json|css)$ {
             gzip on;
             gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
             gzip_min_length 1k;
             gzip_http_version 1.1;
             gzip_comp_level 9;
             gzip_types  text/css application/javascript application/json;
             root /hoj/www/html; # 此处填写你的网页根目录
      }
      location / {  # 路由重定向以适应Vue中的路由
              index index.html;
              try_files $uri $uri/ /index.html;
      }
      location ^~ /scrollBoard{
          alias  /hoj/www/scrollBoard;
          try_files $uri $uri/ /index.html;
          index index.html index.htm;
      }
}

修改后保存，然后重启或者热重载nginx，不出意外应该可用访问前端页面了。

sudo systemctl restart nginx 
或
sudo nginx -s reload

二、docker部署

Tip

html文件夹下为hoj的vue前端打包的静态资源

直接下载本项目，进入到当前文件夹执行打包命令

git clone https://gitee.com/himitzh0730/hoj-deploy.git && cd hoj-deploy/src/frontend

当前文件夹为打包hoj-frontend镜像的相关文件，将这些文件复制到同一个文件夹内，之后执行以下命令进行打包成镜像

docker build -t hoj-frontend .

docker run 启动

Http方式

docker run -d --name hoj-frontend \
-e SERVER_NAME=localhost \
-e BACKEND_SERVER_HOST=backend_server_host \
-e BACKEND_SERVER_PORT=backend_server_port \
-e USE_HTTPS=false \
-p 80:80 \
--restart="always" \
hoj-frontend
# registry.cn-shenzhen.aliyuncs.com/hcode/hoj_frontend

Https方式

需将SSL证书与公钥文件（server.crt、server.kry）放置当前目录

docker run -d --name hoj-frontend \
-e SERVER_NAME=localhost \
-e BACKEND_SERVER_HOST=backend_server_host \
-e BACKEND_SERVER_PORT=backend_server_port \
-e USE_HTTPS=true \
-e ./server.crt:/etc/nginx/etc/crt/server.crt \
-e ./server.key:/etc/nginx/etc/crt/server.key \
-p 80:80 \
-p 443:443 \
--restart="always" \
hoj-frontend
# registry.cn-shenzhen.aliyuncs.com/hcode/hoj_frontend

docker-compose 启动

version: "3"
services:
  hoj-frontend:
    # image: registry.cn-shenzhen.aliyuncs.com/hcode/hoj_frontend
    image: hoj-frontend
    container_name: hoj-frontend
    restart: always
    # 开启https，请提供证书
    #volumes:
    #  - ./server.crt:/etc/nginx/etc/crt/server.crt
    #  - ./server.key:/etc/nginx/etc/crt/server.key
    environment:
      - SERVER_NAME=localhost # 域名或localhost(本地)
      - BACKEND_SERVER_HOST=172.20.0.5 # backend后端服务地址
      - BACKEND_SERVER_PORT=6688 # backend后端服务端口号
      - USE_HTTPS=false
    ports:
      - "80:80"
      - "443:443"
#    networks:
#      hoj-network:
#        ipv4_address: 172.20.0.6

文件介绍

1. default.conf.ssl.template

nginx的SSL配置文件模板，需要在执行 run.sh注入环境变量生成对应的nginx.conf文件

server {
    listen 80;
    #填写绑定证书的域名
    server_name ${SERVER_NAME};
    #把http的域名请求转成https
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name ${SERVER_NAME};
    #证书文件名称
    ssl_certificate /etc/nginx/etc/crt/server.crt;
    #私钥文件名称
    ssl_certificate_key /etc/nginx/etc/crt/server.key;
    ssl_session_timeout 5m;
    #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    root /usr/share/nginx/html;
    location /api{
        proxy_pass http://${BACKEND_SERVER_HOST}:${BACKEND_SERVER_PORT}; # 填写你的后端地址和端口
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   Host                 $http_host;
        proxy_set_header   X-Forwarded-Proto    $scheme;

        client_max_body_size 128M;
    }
    location ~ .*\.(js|json|css)$ {
            gzip on;
            gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
            gzip_min_length 1k;
            gzip_http_version 1.1;
            gzip_comp_level 9;
            gzip_types  text/css application/javascript application/json;
            root /usr/share/nginx/html;
    }
    location / {  # 路由重定向以适应Vue中的路由
            index index.html;
            try_files $uri $uri/ /index.html;
    }
    location ^~ /scrollBoard{
        alias   /usr/share/nginx/scrollBoard;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }

}

2. default.conf.template

nginx的配置文件模板，需要在执行 run.sh注入环境变量生成对应的nginx.conf文件

server {
    listen 80;
    server_name ${SERVER_NAME};
    root /usr/share/nginx/html;
    location /api{
        proxy_pass http://${BACKEND_SERVER_HOST}:${BACKEND_SERVER_PORT}; # 填写你的后端地址和端口
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   Host                 $http_host;
        proxy_set_header   X-Forwarded-Proto    $scheme;

        client_max_body_size 128M;
    }
    location ~ .*\.(js|json|css)$ {
            gzip on;
            gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
            gzip_min_length 1k;
            gzip_http_version 1.1;
            gzip_comp_level 9;
            gzip_types  text/css application/javascript application/json;
            root /usr/share/nginx/html;
    }
    location / {  # 路由重定向以适应Vue中的路由
            index index.html;
            try_files $uri $uri/ /index.html;
    }
    location ^~ /scrollBoard{
        alias   /usr/share/nginx/scrollBoard;
        try_files $uri $uri/ /index.html;
        index index.html index.htm;
    }
}

3. run.sh

作用是将模板conf配置文件注入对应环境变量，生成到指定文件夹

#!/usr/bin/env sh
set -eu 
if [ "$USE_HTTPS" == "true" ]; then
    envsubst '${SERVER_NAME} ${BACKEND_SERVER_HOST} ${BACKEND_SERVER_PORT}' < /etc/nginx/conf.d/default.conf.ssl.template > /etc/nginx/conf.d/default.conf
else
    envsubst '${SERVER_NAME} ${BACKEND_SERVER_HOST} ${BACKEND_SERVER_PORT}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
fi
rm /etc/nginx/conf.d/default.conf.template
rm /etc/nginx/conf.d/default.conf.ssl.template
exec "$@"

4. Dockerfile

FROM nginx:1.15-alpine

COPY default.conf.template /etc/nginx/conf.d/default.conf.template

COPY default.conf.ssl.template /etc/nginx/conf.d/default.conf.ssl.template

ADD html/ /usr/share/nginx/html/

ADD scrollBoard/ /usr/share/nginx/scrollBoard/

COPY ./run.sh /docker-entrypoint.sh

RUN chmod a+x /docker-entrypoint.sh

ENTRYPOINT ["/docker-entrypoint.sh"]

# 每次容器启动时执行
CMD ["nginx", "-g", "daemon off;"]

# 容器应用端口
EXPOSE 80

EXPOSE 443