You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This tutorial will guide you on how to setup Angular with Nginx within a Docker container.
22
+
The tutorial will use:
23
+
- Angular *(Angular15)* to build the Angular app
24
+
- Node.js *(Node22)* to build the Angular app
25
+
- Nginx to serve the Angular app
26
+
- Docker to containerize the Angular app
27
+
- Azure DevOps to build and deploy the Angular app
28
+
29
+
## Create Nginx Configuration
30
+
31
+
Add a file named `nginx.conf` in the root of your project with the following content:
32
+
33
+
```nginx
34
+
# the events block is required
35
+
events{}
36
+
37
+
http {
38
+
# include the default mime.types to map file extensions to MIME types
39
+
include /etc/nginx/mime.types;
40
+
41
+
server {
42
+
listen 80;
43
+
server_name localhost;
44
+
45
+
# set the root directory for the server (we need to copy our
46
+
# application files here)
47
+
root /usr/share/nginx/html;
48
+
49
+
# set the default index file for the server (Angular generates the
50
+
# index.html file for us and it will be in the above directory)
51
+
index index.html;
52
+
53
+
# specify the configuration for the '/' location
54
+
location / {
55
+
56
+
# try to serve the requested URI. if that fails then try to
57
+
# serve the URI with a trailing slash. if that fails, then
58
+
# serve the index.html file; this is needed in order to serve
59
+
# Angular routes--e.g.,'localhost:8080/customer' will serve
60
+
# the index.html file
61
+
try_files $uri $uri/ /index.html;
62
+
}
63
+
}
64
+
}
65
+
```
20
66
21
67
## Create Dockerfile
22
68
69
+
Create a file named `Dockerfile` in the root of your project with the following content:
70
+
23
71
```dockerfile
24
72
FROM node:22 AS build
25
73
@@ -59,42 +107,102 @@ EXPOSE 80
59
107
```
60
108
61
109
62
-
## Create Nginx Configuration
63
-
64
-
65
-
Add a file named `nginx.conf` in the root of your project with the following content:
66
-
67
-
```nginx
68
-
# the events block is required
69
-
events{}
70
-
71
-
http {
72
-
# include the default mime.types to map file extensions to MIME types
73
-
include /etc/nginx/mime.types;
74
-
75
-
server {
76
-
listen 80;
77
-
server_name localhost;
78
-
79
-
# set the root directory for the server (we need to copy our
80
-
# application files here)
81
-
root /usr/share/nginx/html;
82
-
83
-
# set the default index file for the server (Angular generates the
84
-
# index.html file for us and it will be in the above directory)
85
-
index index.html;
86
110
87
-
# specify the configuration for the '/' location
88
-
location / {
111
+
## Setup Azure DevOps Pipeline
112
+
113
+
The solution requres a pipeline to build a Docker image and push it to Azure Container Registry.
114
+
The Image will be tagged with the Build Number and latest and will be pushed to the Development, UAT and Production Container Registry based on the Build Environment.
115
+
116
+
The Pipeline requires three Service Connections to deploy Images to Azure Container Registry
117
+
1. AcrDevelopmentConnection
118
+
2. AcrUATConnection
119
+
3. AcrProductionConnection
120
+
121
+
The Pipeline requires a parameter to specify the Build Environment:
122
+
1.`buildEnv`: "local" # Pass the Build Environment `local | dev | uat | prod`
123
+
124
+
Create a new pipeline in Azure DevOps and add the following code to the `azure-pipelines\container-ci.yml` file:
125
+
126
+
```yaml
127
+
# ASP.NET Core (.NET Framework)
128
+
# Build and test ASP.NET Core projects targeting .NET9.
129
+
# Add steps that publish symbols, save build artifacts, and more:
0 commit comments