Hometutorials
deploy angular application

Jump toUpdate content

Creating and deploying an Angular application on Serverless Containers

Reviewed on 26 April 2022 • Published on 26 April 2022
  • compute
  • serverless
  • angular

Angular is a development platform that can scale from single-developer projects to enterprise-level applications. The platform is built on TypeScript, a superset of JavaScript, and provides features such as:

  • A component-based framework for building scalable web applications
  • A collection of libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
  • A suite of developer tools to develop, build, test, and update code
Requirements:

Creating a demo application

  1. Run the command below to create a new Angular application. It initializes a new project and creates the files required to build the application.

    ng new demo-app
    Important:

    Make sure angular-cli is installed on your local machine. If you have not installed it yet, run sudo apt install angular-cli on Ubuntu/Debian Linux based machines or install it using Homebrew on MacOS: brew install angular-cli.

  2. Enter the application directory:

    cd demo-app

    Run the command ls to see a list of the applications’ files:

    README.md          node_modules       src                tsconfig.spec.json
    angular.json package-lock.json tsconfig.app.json
    karma.conf.js package.json tsconfig.json
  3. Type the following command to run the development server:

    ng serve
  4. Open a web browser and point it to http://localhost:4200 to see the Angular application:

    Press CTRL+C in your terminal to stop the development server.

  5. Add a nginx-configuration.conf file inside the demo-app directory and add the following content to it:

    # Expires map
    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;
    }

    The configuration file above contains information about expiration headers for images and other content (CSS, HTML, etc.) and switches gzip compression on to improve the performance of the application.

  6. Create a Dockerfile named Dockerfile in the applications’ directory and copy the following information into it:

    # Build and compile the frontend
    FROM node:latest as build-stage
    WORKDIR /app
    COPY package*.json /app/
    RUN npm install
    COPY ./ /app/
    RUN npm run build -- --output-path=./dist/out --configuration production

    # Get the compiled app ready to be served with Nginx
    FROM nginx:latest
    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:

Make sure that you have connected your namespace to the Docker CLI before running the following steps.

  1. Run the following command to 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
    Tip:
  3. Push the image to the 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.

  1. 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
  1. Click Deploy a Container to deploy your application. Your application displays in the list of containers:
  1. 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.