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
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://myapod-be; #edited
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
}
}