|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Deploy a Blazor Web App to Linux with NGINX | Syncfusion |
| 4 | +description: Learn here all about deploying the Blazor Web App with Syncfusion Blazor Components to Linux server using NGINX. |
| 5 | +platform: Blazor |
| 6 | +component: Common |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Deploy Blazor Web App to Linux with NGINX |
| 11 | + |
| 12 | +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Linux server using NGINX as a reverse proxy. |
| 13 | + |
| 14 | +Refer to [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0&tabs=linux-ubuntu) topic for more information. |
| 15 | + |
| 16 | +## Prerequisites |
| 17 | + |
| 18 | +* Linux Server – Ubuntu 20.04, Red Hat Enterprise (RHEL) 8.0 and SUSE Linux Enterprise Server 12. |
| 19 | +* [.NET runtime](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk) installed on the server. |
| 20 | +* An existing Blazor Web App with Syncfusion components or create a new one. |
| 21 | + |
| 22 | +## Install and Start NGINX |
| 23 | + |
| 24 | +Install NGINX on your Linux system and enable it to start automatically: |
| 25 | + |
| 26 | +```bash |
| 27 | +sudo dnf install nginx |
| 28 | +sudo systemctl start nginx |
| 29 | +sudo systemctl enable nginx |
| 30 | +sudo systemctl status nginx |
| 31 | +``` |
| 32 | + |
| 33 | +**Verification**: Open `http://your-server-ip` in a browser — you should see the NGINX welcome page. |
| 34 | + |
| 35 | +## Create and publish Your Blazor Web App with Syncfusion Components |
| 36 | + |
| 37 | +* You can create a Blazor Web App using the .NET CLI commands with Syncfusion components by referring [here](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli). |
| 38 | + |
| 39 | +* Publish your Blazor Web application in Release configuration using the following command and run it: |
| 40 | + |
| 41 | +```bash |
| 42 | +dotnet publish -c Release -o publish |
| 43 | +cd publish |
| 44 | +dotnet SfBlazorApp.dll --urls "http://0.0.0.0:5000" |
| 45 | +``` |
| 46 | + |
| 47 | + |
| 48 | + |
| 49 | +## Configure NGINX to Proxy Requests |
| 50 | + |
| 51 | +Create a new NGINX configuration file for your Blazor application: |
| 52 | + |
| 53 | +```bash |
| 54 | +sudo nano /etc/nginx/conf.d/blazorapp.conf |
| 55 | +``` |
| 56 | + |
| 57 | +Add the following configuration to enable NGINX to act as a reverse proxy: |
| 58 | + |
| 59 | +```nginx |
| 60 | +server { |
| 61 | + listen 80; |
| 62 | + server_name _; |
| 63 | + location / { |
| 64 | + proxy_pass http://localhost:5000; |
| 65 | + proxy_http_version 1.1; |
| 66 | + proxy_set_header Host $host; |
| 67 | + proxy_set_header X-Real-IP $remote_addr; |
| 68 | + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
| 69 | + proxy_set_header X-Forwarded-Proto $scheme; |
| 70 | + proxy_set_header Upgrade $http_upgrade; |
| 71 | + proxy_set_header Connection "upgrade"; |
| 72 | + } |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +Save and exit the file (Ctrl+O, Enter, then Ctrl+X). |
| 77 | + |
| 78 | +## Validate and Restart NGINX |
| 79 | + |
| 80 | +Test the NGINX configuration and restart the service: |
| 81 | + |
| 82 | +```bash |
| 83 | +sudo nginx -t |
| 84 | +sudo systemctl restart nginx |
| 85 | +``` |
| 86 | + |
| 87 | +## Configure SELinux (For Red Hat-based Systems) |
| 88 | + |
| 89 | +On Red Hat-based systems, SELinux may block NGINX from accessing your Blazor app. Allow NGINX to connect to network services: |
| 90 | + |
| 91 | +```bash |
| 92 | +sudo setsebool -P httpd_can_network_connect 1 |
| 93 | +``` |
| 94 | + |
| 95 | +## Access the Application |
| 96 | + |
| 97 | +From your Windows machine or any other device, open a browser and navigate to: |
| 98 | + |
| 99 | +``` |
| 100 | +http://<your-vm-ip>/ |
| 101 | +``` |
| 102 | + |
| 103 | +You should now see your Blazor Web app running successfully with Syncfusion components! |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +## See also |
| 108 | + |
| 109 | +* [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0) |
| 110 | +* [Configure NGINX for ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0#configure-nginx) |
0 commit comments