Khalil Chaymae

Posted on Oct 1, 2023

Deploy a full-stack application(Angular-Laravel-Mongodb Atlas) on AWS.

#aws #angular #laravel #mongodb

Introduction
Welcome to the comprehensive guide on deploying an Angular, Laravel, MongoDB Atlas application on AWS (Amazon Web Services). This documentation is focused on helping you understand the step-by-step process of deploying our application stack on AWS infrastructure. By following these instructions, you will be able to host and run your application securely and efficiently.

Project Overview
Our project is a basic web application designed to help users manage their to-do tasks efficiently. It combines a minimalistic user interface with the reliability of Angular, Laravel, MongoDB Atlas, and AWS. Here's a brief overview of the core components:

Angular: Angular powers the front-end of our application, enabling dynamic and responsive user interfaces. It offers a simple and intuitive way to manage your to-do tasks.
Laravel: Laravel serves as the back-end of our application, handling task creation, updates, and deletions. It provides a user-friendly API for interacting with the to-do list.
MongoDB Atlas: MongoDB Atlas is our database solution. It stores and retrieves task data securely, ensuring that your to-do list is always available and up to date.
AWS (Amazon Web Services): AWS hosts and deploys our application. It guarantees scalability, reliability, and security, ensuring you can access your to-do list from anywhere.

Prerequisites
Before we dive into the deployment process, make sure you have the following prerequisites in place:

An AWS account with administrative privileges.
An Angular front-end application. This is the repository of the Angular project I used in this guide: https://github.com/Chaymae-Khl/ToDoList--Angular-Laravel-MongoDb--FRONTEND-.git .
A Laravel back-end application, this is the repository of the Laravel project I used in this guide: https://github.com/Chaymae-Khl/ToDoList-Laravel-MongodbAtlas--BackEnd.git .
A MongoDB Atlas cluster with your application's database.

Let's get started !!!

Step 1: AWS account

Create an AWS account : You can create an account via this link https://portal.aws.amazon.com/billing/signup#/start/email .
Enter you credit cart informations (We will use a free-tier product, so you won't be charged).

Step2: MongoDb atlas account

create MongoDb atlas account You can create an account via this link https://account.mongodb.com/account/register .
After entering your account information:

Select the free cluster and your provider (AWS) and change the cluster name if you want: (You have 512 MB of data size available to use in the free mode)

Create the user:

And voilà, your MongoDB database is ready:

Step3: Connect the back-end with Mongodb Atlas

Click the "Connect" button to obtain the connection string:

Click on Drivers:

In your .env file, update the DB_DNS link to the MongoDB Atlas connection string.

PROBLEM !!!
In this step, I encountered a connectivity issue. To resolve it temporarily, we added an IP address to the access list. However, it's essential to remove this entry later, as it's not recommended to grant access to our database for everyone.

Step4: Deploying the back-end (Laravel)
After confirming that the connection between the back-end and MongoDB Atlas works locally, you can proceed to deploy your application on AWS.

First, we need to compress our application files (ZIP)

So, before creating our environment, we need to create two things: the role and the EC2 key pair that we are going to use in the creation of our environment.

1- IAM role:

An IAM (Identity and Access Management) role in AWS (Amazon Web Services) is a secure and flexible way to delegate permissions to resources within your AWS environment used to grant temporary permissions to perform actions on AWS resources.

To create a IAM role:

Search for IAM service:

Click Roles > “ Create role ” button:

Select the Use case of the account:

Click the “ next “ button.
Now we choose the permisions : AWSElasticBeanstalkWebTier AWSElasticBeanstalkWorkerTier AWSElasticBeanstalkMulticontainerDocker

Enter the name of the role:

Click “create role” button.

2- EC2 key pair:

An EC2 key pair in AWS (Amazon Web Services) is a security credential used to securely authenticate and access virtual instances, specifically Amazon Elastic Compute Cloud (EC2) instances.

To create a key pair:

click the “Create key pair” button:

Enter the name of the key pair > click the “create key pair” button:
After that, a .pem file will be downloaded, and we will use it to connect with the instance.

In AWS search for ‘ elastic beanstalk ‘ service: Amazon Elastic Beanstalk is an easy-to-use service for deploying and scaling web applications and services developed with Java, .NET, PHP, Node.js, Python, Ruby, Go, and Docker on familiar servers such as Apache, Nginx, Passenger, and IIS.

Now we are going to create our environment.

Enter the application name and the domain:

Select the PHP platform: When you select a platform in AWS Elastic Beanstalk, you are choosing the runtime environment for your application.

Here, we need to upload our zipped Laravel folder:

Click the “Next “ button.
In this step, select the role and the profile based on the permissions required and also choose the EC2 key pair that allows us to connect with the instance (We have already created the appropriate role and EC2 key at the beginning of this step).

Keep clicking "Next" until you reach this step. Fill the document root with "/public " > Next.

Click the “ Submit ” button.

After a few minutes, we can see that our application has been created successfully, and the health of the environment is "OK".

To check that the back-end works you can test in Postman the routes: EX:

PROBLEMS !!!
In this step I encountered two problems:

Problem 1:

I encountered an issue with the driver that is not available in the application's instance, causing the application to not work automatically. This is the opportunity to connect to our instance and make the necessary changes.
The first thing we need is Ubuntu because I encountered issues with Windows, and it didn't work properly. To avoid any problems, you can install Ubuntu from the Microsoft Store and use it for this process.
If you remember, during the process of creating the EC2 key pair, a .pem file was downloaded. We will now use this file.
After installing Ubuntu, place the file in the Ubuntu root directory Ubuntu\root.
Then, open the Ubuntu terminal.
In AWS search for EC2 > instances.

Select you instance and click the “Connect” button:

Now we can install the mongodb driver

Type the following command to install it, and it will take a few minutes.

Then, you have to restart the Nginx server using the following command:

To check if MongoDB has been installed successfully, type the following command and search for "mongodb", This command will list all installed PHP extensions, and if MongoDB is installed, you should see "mongodb" in the output.

Now that we have installed the MongoDB driver, we have resolved the driver problem, and your Laravel application should be able to connect to MongoDB without any issues.

Problem 2:

Another issue I encountered was related to route accessibility. It seems that not all routes in the project are accessible.
To resolve this issue, we need to make modifications to a configuration file in the Nginx server. This file likely controls how incoming requests are routed and processed, and making adjustments to it can help ensure that all routes in the project are accessible as intended.
You can use the following command to open the Nginx configuration file for editing:

Add the following lines > Ctrl+s > Ctrl+x

Restart the server :

And now the routes problem is solved.

Finally, remember to remove the 0.0.0.0/0 IP address from the MongoDB Atlas access list and replace it with the IP address of your instance to enhance security.
This ensures that only your AWS instance can access your MongoDB Atlas database.
Go to your AWS EC2 instances and copy the public IP address of your deployed instance

Now, go back to MongoDB Atlas and update your access list to include the public IP address of your AWS instance, which you copied in the previous step. This ensures that your database is accessible only from your AWS instance.

Congratulations! You have successfully deployed your back-end application.

-Step5: Deploying the Front-end

After deploying our back-end project and confirming that it works seamlessly with MongoDB Atlas, there are a few changes we need to make to our Angular project:
First, we need to update the API URL in all the services to reflect the domain where the back-end is deployed.
Make sure to update all the URL in your project. EX:

After updating all the URLs, we need to build our Angular project. Run the following command:

After running the build command, you'll notice that a new folder has been created: /dist
We're going to use these files in the deployment process.

Now, go to the AWS service, and this time, we're going to use a service named S3.

click on “Create bucket” button:

Enter the bucket name > Create bucket:

Uncheck 'Block all public access'.

Then click 'Create bucket' button.
Click on the bucket that you just created:

Click on “Upload” button:

Click on “Add files” button:

Now upload your files.

Click on “Upload” button:

Now after we uploaded our files click on your bucket.
Then click Propreties.

Edit the Static website hosting:

Change Static website hosting to enable:

then click 'save changes' button.
Now, it's time to make some changes to the permissions:

Let's first define what a policy means in the context of S3:
A policy is a JSON (JavaScript Object Notation) document that defines permissions and access control rules for S3 buckets and objects. S3 policies are used to specify who can access your S3 resources, what actions they can perform (e.g., read, write, delete), and under what conditions those actions are allowed or denied.