Deploy Angular and ASP.NET Core Application
Prerequisites:
Basic understanding of Angular and ASP.NET Core frameworks.
Familiarity with web development concepts such as HTML, CSS, and JavaScript.
Knowledge of server-side scripting and backend development with ASP.NET Core.
Experience with deploying applications on cloud platforms.
Basic understanding of Nginx server configuration.
Access to an AWS LightSail account or similar cloud hosting service.
Familiarity with Ubuntu Linux operating system and basic command-line usage.
We need several tools, software, and accounts. Here's a list:
Text Editor/IDE: You'll need a text editor or an Integrated Development Environment (IDE). We use Visual Studio Community to develop Application and Visual Studio Code as text editor.
Web Browser: You'll need a web browser to test and verify your deployments. Common browsers like Google Chrome or Microsoft Edge.
AWS Account: To use AWS LightSail, you'll need an Amazon Web Services (AWS) account. You can sign up for one on the AWS website. You'll also need to set up billing information, although AWS offers a free tier with limited usage for new accounts.
LightSail Instance: Within your AWS account, you'll need to create a LightSail instance. This will involve selecting an instance type, configuring networking, and choosing the Ubuntu operating system.
WinSCP: To copy the files securely, We use WinSCP to copy the published Application to the Ubuntu Instance.
Angular CLI: If you're deploying an Angular application, you'll need the Angular CLI installed globally on your development machine. You can install it via npm, the Node.js package manager.
ASP.NET Core SDK: For developing and deploying ASP.NET Core applications, you'll need the .NET SDK installed on your development machine.
Nginx: Ensure that you have Nginx installed on your LightSail instance. You'll need to configure it to serve your Angular application.
GitHub: GitHub is a web-based hosting service for version control using Git. It allows you to manage your project's source code, track changes, collaborate with others, and deploy your code to production environments
HTTP Client: Optionally, you may want to use an HTTP client like Postman to test your backend API endpoints.
Create a Angular and ASP.NET Core Application:
Step 1 : Open Visual Studio Community: Click on Create new Project
Step 2 : search For Angular and ASP .NET Core project.
Select the project and click on Next button.
Step 3 : Type the project name as “DemoWebApplication”
Setup the location and click on Next.
Step 4: Without making any changer -> Click on Create button.
Step 5: After Creating the project, you can see program.cs file inside DemoWebApplication.Server. Open the file and comment the //app.UseHttpsRedirection(); because we are go8ing to use HTTP redirection.
If we start the Application both server and client will be served from different ports.
Step 6 : To publish the application right click on the DemoWebApplicaton.Server, and Click on publish.
In this Publish form select Folder and click Next, and then leave the target folder as it is and click on Finish.
Target Path where it have been published:
C:\src\DemoWebApplication.Server\bin\Debug\net8.0
Make some changes in publish Settings:
Deployment mode should be self-contained.
Target runtime should be linux-x64
Save the settings.
When we click on Publish it will be published to the target directory: C:\src\DemoWebApplication.Server\bin\Debug\net8.0
Create a Instance using AWS LightSail
To use AWS LightSail, you'll need an Amazon Web Services (AWS) account. You can sign up for one on the AWS website. You'll also need to set up billing information, although AWS offers a free tier with limited usage for new accounts.
Step 1 :Click on Create Instance
Step 2 : Select Linux/Unix, then select “Ubuntu 22.04 LTS” under the operating system.
Step 3 : Then enter instance “name” and add “key values” then click “create instance”.
Step 4 : We have created a Instance:
Setting Up the Ubuntu Instance
Before we dive into deploying our Angular and ASP.NET Core application, let's ensure our Ubuntu instance is properly configured. Here are the steps to install Nginx and the .NET SDK/Runtime:
Install Nginx Server:
sudo apt-get update
sudo apt-get install nginx
This will install the Nginx server on your Ubuntu instance, allowing us to serve our Angular frontend and proxy requests to our ASP.NET Core backend.
Install .NET SDK and Runtime:
First, update your package lists:
sudo apt-get update
Then, install the .NET SDK and runtime:
sudo apt-get install -y dotnet-sdk-8.0
sudo apt-get install -y aspnetcore-runtime-8.0
These commands will install the necessary .NET SDK and runtime components required to build and run our ASP.NET Core application.
With Nginx installed and the .NET SDK/Runtime set up, our Ubuntu instance is ready to host our application.
Setting Up Target Path on LightSail Instance to SCP the published files
Before we deploy our ASP.NET Core application, let's create a target path on our LightSail instance to store the published files. Follow these steps:
Navigate to /srv Directory:
cd /srv
Create a Directory for Web Applications:
sudo mkdir webapps
Set Ownership:
sudo chown ubuntu:ubuntu webapps
Navigate to the webapps Directory:
cd webapps/
Create a Directory for Your Project:
Replace projectfolder with the name of your ASP.NET project.
sudo mkdir projectfolder
Navigate to Your Project Folder:
cd projectfolder
Create a Directory with Today's Date:
sudo mkdir $(date +%Y%m%d)
This command uses date +%Y%m%d to create a directory with today's date in the format YYYYMMDD.
ln -s $(date +%Y%m%d) current
This symbolic link (current) will point to the directory with today's date, making it easier to reference the latest deployment.
With the target path set up, we're ready to publish our ASP.NET Core application and SCP the files to this directory.
Use WinSCP to Copy published files from local to LightSail Instance
Install WinSCP for windows:
Buy it from Windows Store
Go to this website to download: https://winscp.net/eng/download.php
After downloading the WinSCP Install it to your machine.
Let’s connect the WinSCP to Lightsail instance using the SSH key of the instance.
Go to the instance in AWS LightSail option -> Manage -> scroll to bottom -> Click download default key.
Use the puTTy Key Genarator to convert the pem key to private key:
Open the puTTy Key Genarator and click on save privatekey.
Setup the WinSCP:
File protocol : SFTP
Host name: Instance IP Address
Port:22
Host Name: ubuntu
Click on Advanced -> Authentication -> Choose folder to choose SSH key:
Save and launch.
After connecting select the published files from directory and choose the target (var/www/html)directory of cloud in right side box, and click on upload.
If permission is denied, open your ubuntu instance and go to the path :
cd /var/www
From www folder use this command to change the owner of html folder:
sudo chown ubuntu:ubuntu html
Now try again to SCP the Files from your local machine to the LightSail Instance (Ubuntu).
Add Service to Start your Application and server it in specific port:
To Add service, In ubuntu go to the path :
/etc/systemd/system
In the system directory Create a service file with specific name to the service:
sudo touch startdotnetdll.service
sudo nano startdotnetdll.service
This is the service file, Copy and paste it and edit the WorkingDirectory and ExecStart path :
[Unit]
Description=This is the DemoApp created by team
[Service]
WorkingDirectory=/var/www/html
ExecStart=/usr/bin/dotnet /var/www/html/demoapp.dll –urls=http://localhost:5000
Restart=always
# Restart service after 10 seconds if the dotnet service crashes:
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=dotnet-demo/demoapp
User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
[Install]
WantedBy=multi-user.target
Enable the configured service
sudo systemctl enable startdotnetdll.service
To check the status and start the service:
sudo systemctl start startdotnetdll.service
sudo systemctl status startdotnetdll.service
Nginx Configuration:
We want to change our nginx configuration to server the client and server application:
Go to the path: /etc/nginx/sites-enabled
Use command: sudo nano default - To edit the configuration file
server {
listen 80;
server_name example.com; # Your domain name or IP address
root /path/to/angular-dist; # Path to your Angular frontend files
index index.html;
location /api {
proxy_pass http://127.0.0.1:5000; # Forward API requests to ASP.NET Core Web API
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Scheme $scheme;
}
location / {
try_files $uri $uri/ /index.html;
}
}
Make sure to replace example.com with your actual domain name or IP address, and /path/to/angular-dist with the actual path to your Angular frontend files.
With this configuration:
Requests to /api will be forwarded to your ASP.NET Core Web API running on port 5000.
All other requests will be served by the Angular frontend. If a specific file is not found, it will serve the index.html file, which is typical for single-page applications (SPAs) like Angular.
After Changing the configuration file:
Testing Nginx, Restart and Check Status
sudo nginx -t
sudo systemctl restart nginx
sudo systemctl status nginx
