.net6 Signalr+Vue3 配合Ingress Nginx的运用

• .net6 Signalr+Vue3 配合Ingress Nginx的运用
  • 项目打包
    • 后端打包
    • 前端打包
  • 应用部署
  • HTTPS支持

项目打包

我们需要将项目进行打包成容器镜像。

后端打包

首先我们为项目添加Docker的支持，内容如下:

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"]

然后我们找到项目目录的上级，在这里打开cmd。

执行如下命令将项目打包成镜像容器。

# 镜像打包
docker build -t signalrtest:v1 -f signalrtest/Dockerfile .
# 贴标签
docker tag signalrtest:v1 aidasi/signalrtest:v1
# 上传到dockerhub
docker pull aidasi/signalrtest:v1

前端打包

首先添加两个配置文件：default.conf、nginx.conf。

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;
    }
}

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;
}

然后再添加脚本用于替换链接。
container-start.sh

#!/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!!!"

注意这里编码格式可以改为LF，以防止容器不执行该脚本。

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/

最后在vue的更目录下进行打包上传。

# 镜像打包
docker build -t signalrtestvue:v1 -f Dockerfile .
# 贴标签
docker tag signalrtestvue:v1 aidasi/signalrtestvue:v1
# 上传到dockerhub
docker push aidasi/signalrtestvue:v1

应用部署

编写wsdeploy.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
---

kubectl apply -f wsdeploy.yaml

由于我们的域名是自定义的所以可能SPA的nginx解析不到代理。
所以我们可以在CoreDNS里面进行添加，将它的路径指向我们的Ingress svc即可。

kubectl edit cm/coredns -n kube-system

        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
        }

然后我们将自定义域名添加到自己的主机hosts文件上。

echo "www.signalrtest.com 10.211.55.230" >> /etc/hosts
echo "ws.signalrtest.com 10.211.55.230" >> /etc/hosts

接下来我们访问前端并测试访问试试看。

HTTPS支持

添加证书。

# 为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

修改wsdeploy.yaml文件，添加ingress TLS。

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