原

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

5779人阅读 2023/2/27 12:57 总访问：2993861 评论：0 收藏：0 手机

分类: .net后台框架

![.netcore](https://img.tnblog.net/arcimg/hb/c857299a86d84ee7b26d181a31e58234.jpg ".netcore")
>#.net6 Signalr+Vue3 配合Ingress Nginx的运用
[TOC]

tn>结合上篇：https://www.tnblog.net/hb/article/details/7963

项目打包
------------

tn2>我们需要将项目进行打包成容器镜像。

### 后端打包

tn2>首先我们为项目添加Docker的支持，内容如下:

![](https://img.tnblog.net/arcimg/hb/3997f5197a2749fba63c92dba5c39c30.png)

```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。

![](https://img.tnblog.net/arcimg/hb/fb0297d306494e34a63cfbb2bcc7099d.png)

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
```

![](https://img.tnblog.net/arcimg/hb/b1e696b1f5224bd6b96016fe7275731c.png)

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://img.tnblog.net/arcimg/hb/7079055e76e047fbbcaf55405d98de7c.png)

![](https://img.tnblog.net/arcimg/hb/244692d1adb54d1188453e71a5aef1e0.png)

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
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

尘叶心繁

这一世以无限游戏为使命！

博主信息

排名

文章

粉丝

文章类别

.net后台框架 178篇

linux 18篇

linux中cve 1篇

windows中cve 0篇

资源分享 10篇

Win32 3篇

前端 28篇

传说中的c 5篇

Xamarin 9篇

docker 15篇

容器编排 101篇

grpc 4篇

Go 15篇

yaml模板 1篇

理论 2篇

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}