使用Docker發佈blazor wasm

Blazor編譯後的文件是靜態文件，因此咱們只須要一個支持靜態頁面的web server便可。
根據不一樣項目，會用不一樣的容器編排，本文已無網關的狀況下爲例，一步一步展現如何打包進docker

需求

1. HTTPS

既然無網關，直接面向互聯網，因此HTTPS顯得尤其重要

2. HTTP/2 TLS3.0

既然都是靜態資源，使用H2和TLS3.0的目的是進一步加快加載速度

3. Compress

對靜態資源的壓縮的目的依然是進一步加快加載速度。壓縮選型爲Brotli和 Gzip 壓縮

Dockerfile

官方的Nginx鏡像，默認不支持Brotli
因此須要本身準備一個具備Brotli支持的鏡像，這裏推薦使用自賣自詡的Nginx鏡像,不只使用最新的openssl編譯(避免漏洞)，還支持TLS1.3 http2 brotli和默認東八時區，且配置文件裏還有配置示例。歡迎訪問Docker Hub rsnow/nginx，瞭解更多。

發佈blazor wasm

截至2020.05.26，VS還不能把blazor wasm直接發佈到Docker鏡像倉庫，因此只能本身打包

1. 首先發布Release，再也不贅述
2. 在項目根目錄建立Dockerfile

FROM rsnow/nginx:amd64-1.18.0
RUN rm /usr/share/nginx/html/index.html && \
    echo -e 'server { \n\
    listen       443 ssl http2; \n\
    server_name  localhost; \n\
    brotli on; \n\
    brotli_comp_level 6; \n\
    brotli_types application/wasm application/octet-stream text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml; \n\
    gzip on; \n\
    gzip_vary on; \n\
    gzip_proxied any; \n\
    gzip_comp_level 6; \n\
    gzip_types application/wasm application/octet-stream text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml; \n\
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; \n\
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; \n\
    ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem; \n\
    ssl_dhparam /etc/certs/dhparam.pem; \n\
    ssl_session_timeout 1d; \n\
    ssl_session_cache shared:SSL:10m;  about 40000 sessions \n\
    ssl_session_tickets off; \n\
    ssl_protocols TLSv1.3; \n\
    ssl_prefer_server_ciphers off; \n\
    ssl_stapling on; \n\
    ssl_stapling_verify on; \n\
    resolver 1.1.1.1 1.0.0.1 8.8.8.8 8.8.4.4 208.67.222.222 208.67.220.220 valid=60s; \n\
    resolver_timeout 2s; \n\
    add_header X-Frame-Options "SAMEORIGIN" always; \n\
    add_header X-XSS-Protection "1; mode=block" always; \n\
    add_header X-Content-Type-Options "nosniff" always; \n\
    add_header Referrer-Policy "no-referrer-when-downgrade" always; \n\
    add_header Content-Security-Policy "default-src \'self\' http: https: data: blob: \'unsafe-inline\'" always; \n\
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; \n\    
    location / { \n\
        root   /usr/share/nginx/html; \n\
        try_files $uri $uri/ /index.html =404; \n\
    } \n\
} \n\
' > /etc/nginx/conf.d/default.conf
COPY ./bin/Release/netstandard2.1/publish/wwwroot /usr/share/nginx/html/

咱們使用自定義的conf覆蓋掉默認的conf（最簡單的狀況）

1. 整個Nginx Container只有一個虛擬主機，因此server_name不管爲什麼值，請求都會指向這個惟一的虛擬主機
2. 若是有網關，能夠關閉跨域，HTTPS之類的配置，由於這些內容網關會涵蓋
3. 因本示例展現的是最簡單的狀況，因此並無使用 volume ，若是有容器互聯，加載外部證書，配置文件的狀況可根據實際狀況建立掛載點。
4. 不管是gz或br都增長了對application/wasm application/octet-stream的支持

Images

有個Dockerfile,就開始生成鏡像吧

docker build -t example.com/testnginxblazor:latest .

若是須要上傳到倉庫

docker push example.com/testnginxblazor:latest

Run

根據建立的鏡像，建立並運行容器

docker run \
    -d \
    --name nginxblazor \
    -p 443:443 \
    -v /test/fullchain.pem : /etc/letsencrypt/live/example.com/fullchain.pem \
    -v /test/privkey.pem : /etc/letsencrypt/live/example.com/privkey.pem \
    -v /test/chain.pem : /etc/letsencrypt/live/example.com/chain.pem \
    -v /test/dhparam.pem : /etc/certs/dhparam.pem \
    example.com/testnginxblazor

聲明

本文采用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可，發表在CSDN和博客園，歡迎讀者轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接！請讀者/爬蟲們尊重版權