>#.net6 Signalr+Vue3 配合Ingress Nginx的运用 [TOC] tn>结合上篇：https://www.tnblog.net/hb/article/details/7963 项目打包 ------------ tn2>我们需要将项目进行打包成容器镜像。 ### 后端打包 tn2>首先我们为项目添加Docker的支持，内容如下:  ```bash FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base WORKDIR /app EXPOSE 80 FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build WORKDIR /src COPY ["signalrtest/signalrtest.csproj", "signalrtest/"] RUN dotnet restore "signalrtest/signalrtest.csproj" COPY . . WORKDIR "/src/signalrtest" RUN dotnet build "signalrtest.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "signalrtest.csproj" -c Release -o /app/publish /p:UseAppHost=false FROM base AS final WORKDIR /app COPY --from=publish /app/publish . ENTRYPOINT ["dotnet", "signalrtest.dll"] ``` tn2>然后我们找到项目目录的上级，在这里打开cmd。  tn2>执行如下命令将项目打包成镜像容器。 ```bash # 镜像打包 docker build -t signalrtest:v1 -f signalrtest/Dockerfile . # 贴标签 docker tag signalrtest:v1 aidasi/signalrtest:v1 # 上传到dockerhub docker pull aidasi/signalrtest:v1 ``` ### 前端打包 tn2>首先添加两个配置文件：`default.conf`、`nginx.conf`。 ```bash server { listen 80; server_name localhost; large_client_header_buffers 4 32k; location / { try_files $uri $uri/ @router; root /usr/share/nginx/html; index index.html index.htm; } location /ChatHub { proxy_pass http://ws_url; proxy_read_timeout 300s; proxy_send_timeout 300s; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #升级http1.1到 websocket协议 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location @router { rewrite ^.*$ /index.html last; } } ``` ```bash user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; } ``` tn2>然后再添加脚本用于替换链接。 `container-start.sh` ```bash #!/bin/bash for f in `ls /usr/share/nginx/html/js/ | grep app` do echo $f filepath=/usr/share/nginx/html/js/$f filemappath=/usr/share/nginx/html/js/$f sed -i 's#'http://localhost:5102'#'$BACK_API_URL'#g' $filepath sed -i 's#'http://localhost:5102'#'$BACK_API_URL'#g' $filemappath done nginxconfigpath=/etc/nginx/conf.d/default.conf sed -i 's#'http://ws_url'#'$WS_URL'#g' $nginxconfigpath echo "finish!!!" ``` tn2>注意这里编码格式可以改为LF，以防止容器不执行该脚本。 tn2>再然后添加Dockerfile文件通过nginx进行打包容器镜像。 ```bash FROM nginx RUN rm /etc/nginx/conf.d/default.conf RUN rm /etc/nginx/nginx.conf ADD ./default.conf /etc/nginx/conf.d ADD ./nginx.conf /etc/nginx COPY ./dist/ /usr/share/nginx/html/ COPY ./container-start.sh /00-container-start.sh RUN chmod +x 00-container-start.sh RUN cp /00-container-start.sh /docker-entrypoint.d/ ``` tn2>最后在vue的更目录下进行打包上传。 ```bash # 镜像打包 docker build -t signalrtestvue:v1 -f Dockerfile . # 贴标签 docker tag signalrtestvue:v1 aidasi/signalrtestvue:v1 # 上传到dockerhub docker push aidasi/signalrtestvue:v1 ``` 应用部署 ------------ tn2>编写wsdeploy.yaml文件 ```yaml apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: wstestingress annotations: kubernetes.io/ingress.class: "nginx" nginx.org/websocket-services: "wsapi,spa" nginx.ingress.kubernetes.io/rewrite-target: / nginx.ingress.kubernetes.io/proxy-read-timeout: "3600" nginx.ingress.kubernetes.io/proxy-send-timeout: "3600" nginx.ingress.kubernetes.io/configuration-snippet: | proxy_set_header Upgrade "websocket"; proxy_set_header Connection "Upgrade"; spec: rules: - host: "www.signalrtest.com" http: paths: - path: / pathType: Prefix backend: service: name: spa port: number: 80 - host: "ws.signalrtest.com" http: paths: - path: / pathType: Prefix backend: service: name: wsapi port: number: 80 --- apiVersion: apps/v1 kind: Deployment metadata: name: spa labels: name: spa spec: replicas: 1 selector: matchLabels: name: spa template: metadata: labels: name: spa spec: containers: - name: spa image: aidasi/signalrtestvue:v1 ports: - containerPort: 80 imagePullPolicy: Always env: - name: BACK_API_URL value: "http://ws.signalrtest.com" - name: WS_URL value: "http://ws.signalrtest.com/ChatHub" --- apiVersion: apps/v1 kind: Deployment metadata: name: wsapi labels: name: wsapi spec: replicas: 1 selector: matchLabels: name: wsapi template: metadata: labels: name: wsapi spec: containers: - name: wsapi image: aidasi/signalrtest:v1 ports: - containerPort: 80 imagePullPolicy: Always --- kind: Service apiVersion: v1 metadata: name: spa namespace: swprinter spec: ports: - port: 80 protocol: TCP targetPort: 80 selector: name: spa --- kind: Service apiVersion: v1 metadata: name: wsapi spec: ports: - port: 80 protocol: TCP targetPort: 80 selector: name: wsapi --- ``` ```bash kubectl apply -f wsdeploy.yaml ```  tn2>由于我们的域名是自定义的所以可能SPA的nginx解析不到代理。 所以我们可以在CoreDNS里面进行添加，将它的路径指向我们的Ingress svc即可。 ```bash kubectl edit cm/coredns -n kube-system ``` ```bash rewrite stop { name regex ws.signalrtest.com ingress-nginx-controller.ingress-nginx.svc.cluster.local answer name ingress-nginx-controller.ingress-nginx.svc.cluster.local ws.signalrtest.com } ``` tn2>然后我们将自定义域名添加到自己的主机hosts文件上。 ```bash echo "www.signalrtest.com 10.211.55.230" >> /etc/hosts echo "ws.signalrtest.com 10.211.55.230" >> /etc/hosts ``` tn2>接下来我们访问前端并测试访问试试看。   HTTPS支持 ------------ tn2>添加证书。 ```bash # 为www.signalrtest.com生成证书 openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout www.signalrtest.com.key -out www.signalrtest.com.crt # 为ws.signalrtest.com生成证书 openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout ws.signalrtest.com.key -out ws.signalrtest.com.crt # 添加到Kubernetes中 kubectl create secret tls wsweb-tls-secret --key www.signalrtest.com.key --cert www.signalrtest.com.crt kubectl create secret tls wsapi-tls-secret --key ws.signalrtest.com.key --cert ws.signalrtest.com.crt # 生成PEM cat www.signalrtest.com.crt www.signalrtest.com.key > www.signalrtest.com.pem kubectl exec pod/spa-5bcb958b64-8s9zl -- mkdir /etc/nginx/cert/ -p kubectl cp www.signalrtest.com.pem default/spa-5bcb958b64-8s9zl:/etc/nginx/cert/ kubectl cp www.signalrtest.com.key default/spa-5bcb958b64-8s9zl:/etc/nginx/cert/ kubectl exec pod/spa-5bcb958b64-8s9zl -- nginx -s reload ``` tn2>修改wsdeploy.yaml文件，添加ingress TLS。 ```yaml apiVersion: networking.k8s.io/v1 kind: Ingress metadata: name: wstestingress annotations: kubernetes.io/ingress.class: "nginx" nginx.org/websocket-services: "wsapi,spa" nginx.ingress.kubernetes.io/rewrite-target: / nginx.ingress.kubernetes.io/proxy-read-timeout: "3600" nginx.ingress.kubernetes.io/proxy-send-timeout: "3600" nginx.ingress.kubernetes.io/configuration-snippet: | proxy_set_header Upgrade "websocket"; proxy_set_header Connection "Upgrade"; spec: tls: - hosts: - www.signalrtest.com secretName: wsweb-tls-secret - hosts: - ws.signalrtest.com secretName: wsapi-tls-secret rules: - host: "www.signalrtest.com" http: paths: - path: / pathType: Prefix backend: service: name: spa port: number: 80 - host: "ws.signalrtest.com" http: paths: - path: / pathType: Prefix backend: service: name: wsapi port: number: 80 ```