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
.
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
-
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 -
Enter the application directory:
cd demo-appRun the command
ls
to see a list of the applications’ files:README.md node_modules src tsconfig.spec.jsonangular.json package-lock.json tsconfig.app.jsonkarma.conf.js package.json tsconfig.json -
Type the following command to run the development server:
ng serve -
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. -
Add an
nginx-configuration.conf
file inside thedemo-app
directory and add the following content to it:# Expires mapmap $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. -
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 Containers1. 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 values4. 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.