Creating and deploying an Angular application on Serverless Containers
- 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
You may need certain IAM permissions to carry out some actions described on this page. This means:
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.
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-app
Run the command
lsto 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:4200to see the Angular application:
CTRL+Cin your terminal to stop the development server.
nginx-configuration.conffile inside the
The configuration file above contains information about expiration headers for images and other content (CSS, HTML, etc.) and switches
gzipcompression on to improve the performance of the application.
Create a Dockerfile named
Dockerfilein 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.