Creating and deploying an Angular application on Serverless Containers

• serverless
• angular
• docker

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.

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 on your local computer
• Installed Docker on your local machine to build and push the Docker image

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
   

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 an 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 -g @angular/cli RUN npm install COPY ./ /app/ RUN ng 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
<Message type="important">
Make sure that you have [connected your namespace](/containers/container-registry/how-to/connect-docker-cli/) to the Docker CLI before running the following steps.
</Message>
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

<Message type="tip">
  * Make sure you replace `demo-namespace` with the name of your [Container Registry namespace](/containers/container-registry/how-to/create-namespace/).
  * Make sure that the [privacy settings](/containers/container-registry/how-to/manage-image-privacy-settings/) of your namespace are set to **public**.
</Message>
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.
<Message type="tip">
  If you do not have a container namespace yet, click **+ Create a namespace** to create a new one.
</Message>
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.
    <Lightbox src="scaleway-choose-container.webp" alt="" />
  - 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:
<Lightbox src="scaleway-deployed-containers.webp" alt="" />
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.
<Lightbox src="scaleway-container-endpoint.webp" alt="" />
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.