Creating and deploying an Angular application on Scaleway Serverless Containers

• serverless
• angular
• docker

Angular 18 is the latest development platform that scales from single-developer projects to enterprise-level applications. The platform provides enhanced performance, better server-side rendering, and a robust component-based framework.

Prerequisites

Before you start

To complete the actions presented below, you must have:

• A Scaleway account logged into the console
• Owner status or IAM permissions allowing you to perform actions in the intended Organization
• An SSH key
• A Container Registry namespace
• Installed Angular 18 and Node.js on your local machine
• Installed Docker for building and pushing the Docker image

Creating a demo application

1. Initialize the Angular application:

   ng new demo-app
   

2. Enter into the application directory:

   cd demo-app
   

3. Run the development server:

   ng serve
   

4. Open http://localhost:4200 in your browser to verify the application. Press CTRL+C to stop the server.

5. Add an NGINX configuration file nginx-configuration.conf inside the demo-app directory with the following content:

   map $sent_http_content_type $expires {
       default                    off;
       text/html                  epoch;
       text/css                   max;
       application/json           max;
       application/javascript     max;
       ~image/                    max;
   }
   server {
     listen 80;
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;
         try_files $uri $uri/ /index.html =404;
       }
     expires $expires;
     gzip  on;
   }
   

6. Create a Dockerfile. Learn more about creating Dockerfiles

   # Build and compile the frontend
   FROM node:18-alpine as build-stage
   WORKDIR /app
   COPY package*.json /app/
   RUN npm install -g @angular/cli
   RUN npm install
   COPY ./ /app/
   RUN ng build --output-path=./dist/out --configuration production
   # Serve with NGINX
   FROM nginx:stable
   COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html
   COPY ./nginx-configuration.conf /etc/nginx/conf.d/default.conf
   

Building and Publishing the Docker Image

1. Build the Docker image:

   docker build -t demo-app:latest .
   

2. Tag the Docker image:

   docker tag demo-app:latest rg.fr-par.scw.cloud/demo-namespace/demo-app:latest
   

   Replace demo-namespace with your namespace name.

3. Push the image to the Scaleway registry:

   docker push rg.fr-par.scw.cloud/demo-namespace/demo-app:latest
   

Deploying the application on Serverless Containers

1. Click Containers in the Serverless section of the side menu of the Scaleway console. A list of your container namespaces displays.

2. Click the name of the namespace in which you want to deploy the application. The list of your containers displays.

   Tip

   If you do not have a container namespace yet, click + Create a namespace to create a new one.

3. Click Deploy a Container. The container deployment wizard displays.

   Provide the following information to deploy the container:

   • Choose the pushed image in your registry’s namespace and set the port value to 80.
     
   • Choose a name and an optional description for the container
   • Define the container’s resources
   • Configure the scaling of your application
   • Leave the other options at their default values

4. Click Deploy a Container to deploy your application. Your application displays in the list of containers:

   

5. Click on the container’s name. The container information page displays. Click the Container Settings tab. The container endpoint displays in the container information block.

   

Copy the endpoint URL and open it in a web browser. The Angular application displays. It can now automatically scale based on the application’s load and within the ranges set for the deployment.