Skip to navigationSkip to main contentSkip to footerScaleway Docs

Creating and deploying an Angular application on Scaleway Serverless Containers

serverless
angular
docker

Angular 19 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:

Important

Make sure @angular/cli version 19 or higher is installed on your local machine. If you have not installed it yet, run npm install -g @angular/cli@latest.

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

Important

Ensure you have connected your namespace to the Docker CLI before proceeding.

  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.

Tip

Remember that Scaleway enforces a DNS query rate limit of 20 queries per second per container instance. Ensure your application adheres to this limit.

Questions?

Visit our Help Center and find the answers to your most frequent questions.

Visit Help Center
No Results