项目：记一次官网上线nginx + oss 全流程

一次简单的尝试，但觉得有很多细节值得总结记录

大纲

nginx 的2个目录有啥区别
- sites-available: 真正的 nginx 配置文件
- sites-enabled: 是site avaliabe 的一个软链接，方便停用的时候删除掉配置
acme.sh 配置 https
aliyun oss 干的一些“坏事”
nginx + oss 架构的思考
gtc 与 ci 的配合使用

sites-available VS sites-enabled

sites-available: 真正的 nginx 配置文件
sites-enabled: 是 sites-avaliabe 的一个软链接，方便停用的时候删除掉配置，这个配置会以真正的配置载入到 nginx 运行时

# /etc/nginx/sites-enabled
lrwxrwxrwx 1 root root   34 Aug 18 10:42 default -> /etc/nginx/sites-available/default
lrwxrwxrwx 1 root root   33 Aug 18 10:49 saybot -> /etc/nginx/sites-available/saybot

sudo ln -s /etc/nginx/sites-available/site.com.conf /etc/nginx/sites-enabled/site.com@

acme.sh 配置 https

https://github.com/acmesh-official/acme.sh

aliyun oss 干的一些“坏事”

现在线上经过一些配置，会出现除 .txt 之外的文件后缀都变成下载

http://site.com/sites/test.txt
http://site.com/sites/test.png
http://site.com/sites/test.html

经过一翻查看，看到 http 返回上被添加了这个配置

Content-Disposition: attachment

解决方案：在 nginx 里将这个隐藏掉，并添加自己需要的 header; 完整的配置如下。

此问题的关键配置为: proxy_hide_header "Content-Disposition";

server {
    listen 80;
    server_name www.site.com site.com;
    return 301 https://www.site.com;
}

server {
    listen 443 ssl;
    server_name www.site.com site.com;
    ssl_certificate      /root/.acme.sh/site.com/fullchain.cer;
    ssl_certificate_key  /root/.acme.sh/site.com/site.com.key;

    access_log /var/log/nginx/site_access.log;
    error_log /var/log/nginx/site_error.log;

    #  root /var/www/site;
    #  index index.html;

    location / {
		# add_header Cache-Control max-age=31536000;
	  	proxy_hide_header "Content-Disposition";
        add_header Content-Disposition inline;
        # end with /, rewrite to /index.html
        rewrite ^(.*)/$ $1/index.html last;
        proxy_pass https://site-com-web.oss-cn-beijing.aliyuncs.com/site.com/production/;
    }
}

nginx + oss

为什么用这种方式：因为政策原因，必须放一台独立的服务器
优点在哪里：
- 开发人员基本后期不用关心 nginx / server 配置
- 使用 gitlab ci，使用前面 react_oss 的统一 CI 部署方式完成部署
- 不直接使用 oss 的好处，https 可以使用 acme 等工具，实现完美的自动续期

gtc的使用与配置

glab-preset 配置项目
添加 .gtcrc 配置文件到项目

# 安装
pip install glab-preset -U
# 使用
glab-preset

.gtcrc 配置文件，因为只有生产环境，所以，只要一个发布命令即可。

{
    "commands": [
        { "name": "发布到 production 环境", "value": "production" },
        { "name": "仅更新 cache 的 node_modules", "value": "cache" }
    ]
}

.gitlab-ci.yml 配置文件

include:
  # use frontend-ci
  - project: aric.zheng/frontend-ci
    ref: master
    file: dist/templates/react-oss/main.yml

variables:
  NODE_VERSION: 14.17.0
  BUCKET_CONTEXT: site-com-web/site.com

大纲

sites-available VS sites-enabled

acme.sh 配置 https

aliyun oss 干的一些“坏事”

nginx + oss

gtc的使用与配置

参考