I'm attempting to use nginx to deliver an angular project. Here is the nginx-conf file I use to set up the nginx server.
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
root /usr/share/nginx/html;
server {
listen 8083;
location /att-app {
root /usr/share/nginx/html/att-app;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
}
}
}
}
The URL for this app should be something like http:///att-app when it is imported into another app. The index.html and other js files in the /usr/share/nginx/html/folder are clearly visible, but the page is still inaccessible.
Dockerfile
# ----- BUILD -----
# Base image used for build node js apps
FROM node:12.2.0-alpine AS build
# Set our working directory
WORKDIR /app
# Copy package manifest (we do this in order to cache dependencies)
COPY ./package.json .
# To handle 'not get uid/gid'
RUN npm config set unsafe-perm true
# Install dependencies
RUN npm i
RUN npm install -g @angular/cli@8.3.26
# Copy our application files
COPY . .
# Build a static version of our angular app
RUN ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path
# ----- SERVE -----
# We'll use an nginx base to host our built static assets
FROM nginx
# Copy our minimal custom configuration
#COPY ./nginx.conf /etc/nginx/nginx.conf
RUN mkdir /usr/share/nginx/html/att-app
RUN chmod -R 777 /usr/share/nginx/html/att-app
# Copy our static assets from our build container
COPY --from=build /app/dist/att-app /usr/share/nginx/html
COPY --from=build /app/dist/att-app /usr/share/nginx/html/att-app
# Copy our minimal custom configuration
#COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
# support running as arbitrary user which belogs to the root group
RUN chmod g+rwx /var/cache/nginx /var/run /var/log/nginx
EXPOSE 8083
# remove the user directive
# comment user directive as master process is run as user in OpenShift anyhow
RUN sed -i.bak 's/^user/#user/' /etc/nginx/nginx.conf
CMD ["nginx", "-g", "daemon off;"]