Seo - How to deploy an Angular 18 SSR application, with Docker, docker-compose, and NGINX?

MarioProietti
August 26, 2024
208 views
0 votes
2 Answers

I’ve upgraded my app to Angular 18, and I want to use SSR technology in order to have better performance and SEO.
Without SSR, I had no problem relative to deploy and run in production my app, but now I don’t know how to do it.

This is my docker-compose.yml file

version: "3.9"
services:
    myapod-be:
        image: myapod-be
        container_name: myapod-be
        build:
            context: ./my-apod-be
        ports:
            - "9000:80"
    myapod-fe:
        image: myapod-fe
        container_name: myapod-fe
        build:
            context: ./myapod-fe
        ports:
            - "80:80"
            - "443:443"
        depends_on:
            - myapod-be
    myapod-text-translator:
        image: myapod-text-translator
        container_name: myapod-text-translator
        build:
            context: ./myapod-text-translator
        ports:
            - "8081:8081"

This is my Dockerfile for front-end

FROM nginx:alpine

COPY /dist/* /usr/share/nginx/html/
COPY /nginx/security-headers.conf /etc/nginx/conf.d/security-headers.conf
COPY /nginx/certificates/myapod.com/myapod.key /etc/nginx/conf.d/certificates/myapod.key
COPY /nginx/certificates/myapod.com/ssl-bundle.crt /etc/nginx/conf.d/certificates/ssl-bundle.crt
COPY /nginx/nginx.conf /etc/nginx/conf.d/default.conf

And this is my nginx.conf file

upstream docker-be {
    server myapod-be:80 max_conns=200;
}

server {
    listen 80;
    server_name myapod.com;
    return 301 https://$server_name$request_uri;
}

server {
   include /etc/nginx/extra-conf.d/*.conf;
   
   listen       443 ssl;
   server_name myapod-fe;
   
   ssl_certificate           /etc/nginx/conf.d/certificates/ssl-bundle.crt;
   ssl_certificate_key       /etc/nginx/conf.d/certificates/myapod.key;

   #ssl on;
   ssl_session_cache  builtin:1000  shared:SSL:10m;
   ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
   ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
   ssl_prefer_server_ciphers on;
   
   server_tokens off;
   
   charset UTF-8;
   
   #GZIP
   gzip on;
   gzip_disable "MSIE [1-6]\.(?!.*SV1)";
   gzip_proxied any;
   gzip_comp_level 5;
   gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
   gzip_vary on;
   gzip_min_length 256;
   
   # Logging Settings
   access_log /var/log/nginx/access.log;
   error_log /var/log/nginx/error.log;
   
   reset_timedout_connection on;
   client_body_timeout 5s;
   client_header_timeout 5s;
   
   client_body_buffer_size 20K;
   client_header_buffer_size 2k;
   client_max_body_size 20k;
   large_client_header_buffers 3 1k;
   
   keepalive_timeout 15;
   send_timeout 10;
  
   #Request mapping
   location / {
       root /usr/share/nginx/html;
       index index.html index.htm;
       try_files $uri $uri/ /index.html =404;
       add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
       include /etc/nginx/conf.d/security-headers.conf;
   }
   
   location /myapod-be/ {
       proxy_pass http://docker-be;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $http_host;
   }
}

I didn’t post other project files because I have issues only with FE package, please can you tell me what I have to do?

I tried to change docker file and nginx.conf content, but didn’t work

Answers

Chosen as BEST ANSWER

I reply to my own answer for showing how I solved. I got the solution thanks to @nabin sademba, I had just to modify my docker-compose.yml file, so here its content

version: "3.9"
services:
    myapod-be:
        image: myapod-be
        container_name: myapod-be
        build:
            context: ./my-apod-be
        ports:
            - "9000:80"
    myapod-fe:
        image: myapod-fe
        container_name: myapod-fe
        build:
            context: ./myapod-fe
        ports:
            - "4000:4000"
    myapod-text-translator:
        image: myapod-text-translator
        container_name: myapod-text-translator
        build:
            context: ./myapod-text-translator
        ports:
            - "8081:8081"
    nginx:
        restart: always
        image: nginx:alpine
        ports:
          - "80:80"
          - "443:443"
        volumes:
          - ./nginx/security-headers.conf/:/etc/nginx/conf.d/security-headers.conf
          - ./nginx/certificates/myapod.key/:/etc/nginx/conf.d/certificates/myapod.key
          - ./nginx/certificates/ssl-bundle.crt/:/etc/nginx/conf.d/certificates/ssl-bundle.crt
          - ./nginx/nginx.conf/:/etc/nginx/conf.d/default.conf

Futhermore a small edit in my nginx.conf file:

upstream ssr {
    server myapod-fe:4000;
}

server {
    listen 80;
    server_name myapod.com;
    return 301 https://$server_name$request_uri;
}

server {
   include /etc/nginx/extra-conf.d/*.conf;
   
   listen       443 ssl;
   server_name myapod-fe;
   
   ssl_certificate           /etc/nginx/conf.d/certificates/ssl-bundle.crt;
   ssl_certificate_key       /etc/nginx/conf.d/certificates/myapod.key;

   #ssl on;
   ssl_session_cache  builtin:1000  shared:SSL:10m;
   ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
   ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
   ssl_prefer_server_ciphers on;
   
   server_tokens off;
   
   charset UTF-8;
   
   #GZIP
   gzip on;
   gzip_disable "MSIE [1-6]\.(?!.*SV1)";
   gzip_proxied any;
   gzip_comp_level 5;
   gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
   gzip_vary on;
   gzip_min_length 256;
   
   # Logging Settings
   access_log /var/log/nginx/access.log;
   error_log /var/log/nginx/error.log;
   
   reset_timedout_connection on;
   client_body_timeout 5s;
   client_header_timeout 5s;
   
   client_body_buffer_size 20K;
   client_header_buffer_size 2k;
   client_max_body_size 20k;
   large_client_header_buffers 3 1k;
   
   keepalive_timeout 15;
   send_timeout 10;
  
   #Request mapping
   location / {
        proxy_pass http://ssr/;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
   }

   location /myapod-be/ {
       proxy_pass http://myapod-be;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $http_host;
   }
}

Why don't you see my work at myapod.com :)?

(Edit)

frontend docker file:

# Use Node.js for building the Angular SSR app
FROM node:18 as builder

# Set the working directory
WORKDIR /app

# Copy package.json and install dependencies
COPY package*.json ./
RUN npm install

# Copy all files and build the Angular SSR app
COPY . .
RUN npm run build:ssr

# Use a minimal Node.js image to run the SSR server
FROM node:18-alpine as server

# Set the working directory
WORKDIR /app

# Copy the built app from the builder stage
COPY --from=builder /app/dist /app/dist

# Install serve to serve the SSR app
RUN npm install -g serve

# Expose the SSR server port
EXPOSE 4000

# Command to run the SSR server
CMD ["npm", "run", "serve:ssr"]

docker-compose.yml

services:
    myapod-be:
        image: myapod-be
        container_name: myapod-be
        build:
            context: ./my-apod-be
        ports:
            - "9000:80"
    myapod-fe:
        image: myapod-fe
        container_name: myapod-fe
        build:
            context: ./myapod-fe
        ports:
            - "4000:4000"
        depends_on:
            - myapod-be
    myapod-text-translator:
        image: myapod-text-translator
        container_name: myapod-text-translator
        build:
            context: ./myapod-text-translator
        ports:
            - "8081:8081"

nginx.conf

upstream ssr {
    server myapod-fe:4000;
}

upstream docker-be {
    server myapod-be:80 max_conns=200;
}

server {
    listen 80;
    server_name myapod.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name myapod.com;
    
    ssl_certificate           /etc/nginx/conf.d/certificates/ssl-bundle.crt;
    ssl_certificate_key       /etc/nginx/conf.d/certificates/myapod.key;
    
    ssl_session_cache  builtin:1000  shared:SSL:10m;
    ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
    ssl_prefer_server_ciphers on;
    
    charset UTF-8;
    
    gzip on;
    gzip_disable "MSIE [1-6]\.(?!.*SV1)";
    gzip_proxied any;
    gzip_comp_level 5;
    gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
    gzip_vary on;
    gzip_min_length 256;
    
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    reset_timedout_connection on;
    client_body_timeout 5s;
    client_header_timeout 5s;

    client_body_buffer_size 20K;
    client_header_buffer_size 2k;
    client_max_body_size 20k;
    large_client_header_buffers 3 1k;

    keepalive_timeout 15;
    send_timeout 10;
    
    # Proxy requests to the SSR server
    location / {
        proxy_pass http://ssr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    }

    location /myapod-be/ {
       proxy_pass http://docker-be;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $http_host;
   }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Seo – How to deploy an Angular 18 SSR application, with Docker, docker-compose, and NGINX?

Answers