Deploy a full-stack application(Angular-Laravel-Mongodb Atlas) on AWS.
Tags: aws, angular, laravel, mongodb
Published: 2023-10-01 20:06:26

**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:

1. An AWS account with administrative privileges.

2. 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 .

3. 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 .

4. A MongoDB Atlas cluster with your application's database.

---

**Let's get started !!!** 

<u>Step 1</u>: 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).

<u>Step2</u>: 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuqkzu1oxikadj2e6160.PNG)

- 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)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykwx3uo85ysnebk7xj6b.PNG)

- Create the user:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oejqv0e040vmg8l1in7r.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocxawztv1erp04rpqwvq.PNG)

- And voilà, your MongoDB database is ready:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/080sy3068s89jf7sywgy.PNG)

<u>Step3</u>: Connect the back-end with Mongodb Atlas
- Click the "Connect" button to obtain the connection string:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3bifqawrjwqtkfhlr0p.PNG)

- Click on Drivers:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5klpsy3ota08q98o6kof.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39r33opo6iupeszmlwqm.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5vvss7ucnekt3upok6a.PNG)

---

> **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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewvqpm68izn5e22z0p46.PNG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy7axixryl146qz5qe69.PNG)

---

<u>Step4</u>: 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)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6niyoykman8u70n54pg.PNG)

- 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzfkqwi37az9z8xcck9e.PNG)

- Click Roles > “ Create role ” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y8m4f9x389zc5vas7hq.PNG)

- Select the Use case of the account:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in85r0gz1nnqmvgiebv5.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9omo7knv09ee0zhsfjz0.PNG)

- Enter the name of the role:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evgjx3py136zxf0taped.PNG)

- 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79tqvo1k3tkg10dgmfs5.PNG)

- click the “Create key pair” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weiblk45d6wfvqxkap5q.PNG)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6q031ykagpg0bz3lt9y.PNG)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzpjxyvnfte5vnng6hmt.PNG)

- Now we are going to create our environment.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3t10gs2w61qv255qjqh.PNG)

- Enter the application name and the domain:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptdtrq7xbuxzh10v2m2q.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlf4tjlmyqnkf8mmrazt.PNG)

- Here, we need to upload our zipped Laravel folder:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4abbsbz0j9c1kfnqhiyh.PNG)

- 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).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60y00yivq32c49z9qlns.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdritolry8vtjl2cco6g.PNG)

- Click the “ Submit ” button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lbqtcnqgjzaugnwcced.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4tyl022br95pe2a0gyf.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sso5igk4gnsh7fhgjpti.PNG)

---

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

<u>Problem 1</u>:
- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ghx9zn9eo8evcqhcwlx.PNG)

- Select you instance and click the “Connect” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xref5pclxteo1e1553z.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0czszx9k3z3d58t80tqe.PNG)

- Now we can install the mongodb driver

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh6d72h5uretjgv3s63d.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fhf6m8th6fb6oz46m7b.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6pik96sbvbke5nr1gly.PNG)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16yfi5fppgr4k68dr9r0.PNG)

- 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.

<u>Problem 2</u>:

- 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q8nun56ki6k8nh9ljcu.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpvcxwnc9dnxdsclypn4.PNG)

- Restart the server :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utdkeympkpkjwll4tmcx.PNG)

- 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ih26iiqhja1jfdco1f0x.PNG)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iodftn0x1kauwz8f78ks.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwfned317a509eeap7xg.png)



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

---

-<u>Step5</u>: 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8qy10x55ml6gq5icacl.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zih97y8sddliknp6e9iq.png)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m60mqj7rd3wc1ucraia.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tn0k6jeqjxlogf7wrav.png)

- click on “Create bucket” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1gcrpiatxfw1su3fmc3.png)

- Enter the bucket name > Create bucket:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpdl0eduz6l23o5wiccv.png)

- Uncheck 'Block all public access'.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqd8683dh0kx74hx486w.png)

- Then click 'Create bucket' button.

- Click on the bucket that you just created:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vchpe5qj63bd61x03ned.png)

- Click on “Upload” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmtbomraqmo7gelf6ylf.png)

- Click on “Add files” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u78rt2s12ppw0vbeq2qo.png)

- Now upload your files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cr7ncuabskpa2dpqacj.png)

- Click on “Upload” button:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g203u5rlc90udpw1zg4.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dwocnoqszfvhavkqe9q.png)

- Edit the Static website hosting:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dfq4vs85fh047g2vsx0.png)

- Change Static website hosting to enable:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb03dsixrhdgzw46lfa1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubc50winvd516wmhpywy.png)

- then click 'save changes' button.

- Now, it's time to make some changes to the permissions:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti35rmls96sj7xtmqyl1.png)

>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.

- After defining the policy, it's time to make edits to the bucket policy:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egpaso0geotm28onkqcz.png)

- Now, add a new policy:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76sici3q2ngga6k049kl.png)


- Click on the 'Save changes' button.
- We are done we can access our application via internet.
- To access the application click on your bucket name > Properties

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgd052qhlaejohrsvb6h.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqr7aom1zte6uxku9b5y.png)

###**Congratulations! You have successfully deployed your FullStack application.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkhqei2whnylw1yqce3s.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0mmi1wpry19loo41r12.png)