In the folder where you are able to execute 'ng server' from create a DockerFile with the following contents.
FROM node:alpine
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install -g @angular/cli
RUN npm install
CMD ["ng", "serve", "--host", "0.0.0.0"]
Afterwards validate that the image has been created and that you can successfully install see the created image:
docker images
Once that is done you can publish the docker image to any registry.
docker tag <image-name> <your-registry>/<image_name_in_registry>:<image_version>
example:
docker tag forex-website registry.kroup.xyz/forex-website:0.1
Then you push it to a registry:
docker push registry.kroup.xyz/forex-website:0.1
The above is for running a development server. If you are trying to deploy this to an actual site you will get this error:
Blocked request. This host ("website.kroup.xyz") is not allowed.
To allow this host, add "website.kroup.xyz" to `server.allowedHosts` in vite.config.js.
First you will need to tell nginx that you are using a server by creating a nginx.conf file in the root directory. You can see from the dockerfile below that it is used to indicate the port and location of files.
It looks like this:
server {
listen 80;
server_name website.kroup.xyz;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
You will have to change your docker file to look something like this:
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm install -g @angular/cli
RUN ng build --configuration production
# Stage 2: Serve app with NGINX
FROM nginx:alpine
# Remove default NGINX config
RUN rm -rf /etc/nginx/conf.d/default.conf
# Copy custom NGINX config
COPY nginx.conf /etc/nginx/conf.d
# Copy build artifacts from builder stage
COPY --from=builder /app/dist/your-app-name /usr/share/nginx/html
You are going to need three files for docker after a successfull tag and push cycle;
apiVersion: apps/v1
kind: Deployment
metadata:
name: forex-website
spec:
replicas: 1
selector:
matchLabels:
app: forex-website
template:
metadata:
labels:
app: forex-website
spec:
containers:
- name: forex-website
image: registry.kroup.xyz/forex-website:0.3 # Use your image
ports:
- containerPort: 80
apiVersion: v1
kind: Service
metadata:
name: forex-website
spec:
selector:
app: forex-website # must match the label on your Deployment
ports:
- port: 80 # Exposed to Ingress
targetPort: 80 # Port inside the container (NGINX)
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: forex-website-ingress
namespace: default
annotations:
cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
ingressClassName: nginx
tls:
- hosts:
- website.kroup.xyz
secretName: angular-tls
rules:
- host: website.kroup.xyz
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: forex-website
port:
number: 80
From the above three files it can be seen that the same information is repeated quite ofter. T
for example the:
Helm was created to make creating these files easier.
The next section can be found here: