I have dockarized my application. It needs nginx to start. Front end is Angular and backend is Java spring boot. I am using spring security

I want to use azure app service to start my application.

1. how can i access my application with url provided by azure app service?

Thanks for the additional info.

Please enable and review logs to fetch more details about the error and let us know: #enable-application-logging-linuxcontainer and Access log files

By default, App Service assumes your custom container is listening on port 80.

If you’re running a (custom container) with Web App for Containers, use WEBSITES_PORT. Ensure that this is set to the port that’s also exposed in your Dockerfile through the EXPOSE instruction Vs On App Service Linux, using (Blessed Images) - use PORT, which directly influences the container port of the docker run command.

Ensure that your application is listening on the correct port. In your Dockerfile, you have EXPOSE Ports', make sure these ports are correctly configured in your application code and match the ports exposed in the Dockerfile.

Arhanti Doshi, To better assist you on this, are you provisioning the container image via ACR? Are you referring to this Azure doc for the steps?  Are you deploying via GitHub Actions or Azure Devops?

 

Based on my understanding of your scenario description, just to highlight, when you create production build for your Angular or other Node framework the files will either be placed in a build or dist directory depending on the framework.

App Service on Linux uses Oryx to detect, build, and start your application.

 

Where frontend contains your Angular project. Outside of frontend is the backend (eg., server.js.)

1. cd into the frontend folder, or the folder containing your SPA, and run npm run build (or yarn run build).
2. The output from this should be a /build folder under your frontend directory (in React’s case) - using Angular or others may produce a folder named /dist.

o You can run this folder directly to test with something like npx serve -s build.

3.Update your backend to reflect your front end production builds location

Take a look at the sample frontend-backend-spa-node-example from my colleague you can employ a similar approach for your Angular app.

• Run npm run build
• Run npm run start

Kindly let us know, I'll follow-up with you further.

Kindly let us know more info about your scenario, I'll follow-up with you further.

Adding more info:

Use a startup command passing --spa argument to PM2 as followed: pm2 serve /home/site/wwwroot/dist/angularfrontend --no-daemon --spa 

 

PM2 can serve static files or a SPA (Single Page Application) with pm2 serve feature.

Angular Deployment on App Service Linux

1. In the Azure Portal, go to Configuration.
2. Select General and locate the Startup Command box.
3. If all of the items in the build directory are in wwwroot, change the path to /home/site/wwwroot. 4.pm2 serve /home/site/wwwroot/build --no-daemon
4. If the content is under dist, make sure to use the following. 6.pm2 serve /home/site/wwwroot/dist --no-daemon
5. Press Save.  

Hello

Here is what I am trying to do

1. i have front end in angular
2. 2. backend in java spring
3. i build front using npm run start:dev(i have set this in package.json)
4. i start nginx
5. i start my backend.

now i have dockarized this process

here is my docker file:

Build stage for the Angular UI using Node.js

FROM node:14-alpine AS nodebuild

WORKDIR /ui

COPY ui /ui

Build stage for Java JARs using OpenJDK

FROM openjdk:17-jdk-slim AS javabuild

Install Maven in the Java build stage

RUN apt-get update && apt-get install -y maven && apt-get clean

Set JAVA_HOME

ENV JAVA_HOME="/user/lib/jvm/java-11-openjdk-amd64"

ENV PATH="$JAVA_HOME/bin:$PATH"

WORKDIR /

COPY automator /automator

COPY agent /agent

COPY agent-launcher /agent-launcher

COPY server /server

Build the Java applications

RUN mvn clean install -f /automator

RUN mvn clean install -f /agent

RUN mvn clean install -f /agent-launcher

RUN mvn clean install -f /server

Final stage for the runtime environment

FROM openjdk:17-jdk-slim

WORKDIR /opt/app

Install Nginx and other necessary packages

RUN apt-get update && \

apt-get install -y nginx wget openssl unzip && \

apt-get clean

Create necessary directories

RUN mkdir -p /etc/nginx/logs

RUN mkdir -p /opt/app/lib

RUN mkdir -p /opt/app/ts_data

RUN mkdir -p /usr/share/nginx/logs

Copy Nginx configuration and other necessary files

COPY deploy/docker/nginx.conf /etc/nginx/nginx.conf

COPY deploy/docker/ssl/ /opt/app/ts_data/ssl/

COPY deploy/docker/cacerts /usr/lib/jvm/jre/lib/security/

COPY deploy/docker/entrypoint.sh /opt/app/entrypoint.sh

#COPY /ui/dist/testsigma-angular /opt/app/angular/

COPY LandingUI opt/app/LandingUI/

COPY /ui/dist/automator opt/app/TestsigmaUI/

COPY /server/target/autopilotqa-server.jar /opt/app/autopilotqa-server.jar

COPY /server/target/lib/ /opt/app/lib/

COPY /server/src/main/scripts/posix/start.sh /opt/app/

Clean up default Nginx config and set permissions

RUN rm -f /etc/nginx/conf.d/default.conf

RUN chmod +x /opt/app/start.sh

RUN chmod +x /opt/app/entrypoint.sh

Environment variables

ENV IS_DOCKER_ENV=true

ENV MYSQL_HOST_NAME=${MYSQL_HOST_NAME:-mysql}

ENV TS_DATA_DIR=/opt/app/ts_data

ENV TESTSIGMA_WEB_PORT=${TESTSIGMA_WEB_PORT:-443}

ENV TESTSIGMA_SERVER_PORT=${TESTSIGMA_SERVER_PORT:-9090}

EXPOSE $TESTSIGMA_WEB_PORT

EXPOSE $TESTSIGMA_SERVER_PORT

ENTRYPOINT ["/opt/app/entrypoint.sh"]

now i have created docker image arhanti/server_prod:v0.0.0

when i run this in my local docker desktop it runs fine

but when i use this image in azure app service using docker hub repository i am not able to start my application .

Hello Thank you for your response

this is log stream

I have this is my nginx.config file

server {

listen       443 ssl;

ssl_certificate /etc/ssl/www_autopilotqa_com.pem;

ssl_certificate_key /etc/ssl/www_autopilotqa_com.key;

server_name   ~^(?<subdomain>[^.]+)\.autopilotqa\.com$;
```  #server_name autopilotqa-gmbnadh3hugaanap.uksouth-01.azurewebsites.net;

   error_log    logs/autopilotqa.error.log debug;

```javascript
access_log   logs/autopilotqa.access.log  main;

root	 /opt/app/angular;

index	 index.html;

location = / {

  rewrite /  https://$host/ui/ redirect;

}

location / {

   proxy_set_header Host $host;

  proxy_set_header X-Real-IP $remote_addr;

  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  proxy_set_header X-Forwarded-Proto https;

  proxy_pass http://localhost:9090;

} 
```And this is my docker file

# Environment variables

ENV IS_DOCKER_ENV=true

ENV MYSQL_HOST_NAME=${MYSQL_HOST_NAME:-mysql}

ENV TS_DATA_DIR=/opt/app/ts_data

ENV TESTSIGMA_WEB_PORT=${TESTSIGMA_WEB_PORT:-443}

ENV TESTSIGMA_SERVER_PORT=${TESTSIGMA_SERVER_PORT:-9090}

EXPOSE $TESTSIGMA_WEB_PORT

EXPOSE $TESTSIGMA_SERVER_PORT

Hope you are having a good weekend.

As I understand you are leveraging multi-container, please note there are unsupported options.

The doc section - Configure a custom container for Azure App Service -- Configure multi-container apps

Also, the listening port from the logs.SERVER_PORT:-9090

I have also followed-up with you privately.

hello Sir,

Thank You

I have pushed my image on docker hub. I am using docker registory and using that image

I have added custom domain test.autopilotqa.com. but not able to access app using that domain. i have done changes in nginx file:

For additional info, I'm following-up with you privately.