Forem: Ajanaku Temitope Grace

Create an Azure Static Web App in 2 mins!

Ajanaku Temitope Grace — Sat, 15 Apr 2023 13:26:55 +0000

If you have used Netlify and Vercel before and found them simple, you might be pleasantly surprised by the experience offered by Azure Static Web Apps. This service provides automatic deployment for web applications, allowing you to deploy full-stack web apps using a variety of sources such as Github, Azure DevOps, and others.

In this article, we will focus on using Github as the source for creating an Azure Static Web App. So, let's dive in!

Step 1: Create your Azure account

Don't have an Azure account yet? Not to worry, you can easily create a free account by clicking here and selecting the "Start free" option. Simply follow the prompts and you'll be in the Azure portal in no time!

Step 2: Create Azure static web app
I know that's why you are here. In your Azure portal, select the Create resource.

This will take you to Azure market place. Make use of the search field and search web app. You have various results like in the image below

Alot of possibilities we have there. Our focus is the Static web app so select Create static web like so

Creating a resource group is required. If you have a resource group you have created previously, you can select it in the drop down else create a new one.

Next is to complete your static web details. This include;

Name: You can use any name you want here. Ensure you follow the validation. Special characters are not allowed!
Plan: You have two options here, Free and Standard. If you are deploying a personal project, free is the plan for you. If you have a production web app, you might want to explore the standard plan.
Azure Staging details: We follow the rule in creating virtual machine. Always select a region close to your customer!
Deployment details: You have three options here, Github/Azure Devops/Other. As mentioned earlier, we will use Github

Step 3: Connect your Github

This is easy. Allow access to your Gitub simply by selecting Github and completing Github authorization.

Select the organization you have your repository (if you have multiple organizations on Github)
Select your project repository
Select a branch. Make sure this is the branch with the changes you want to deploy.

Review your details and create your static web app. Once your deployment is complete, you can now go to your resource overview.

You can see your url. If clicked, it might still be empty. This is because your Github action is still in progress. You can inspect this.

What happens if my workflow fails?
I thought you won't ask. A common error can be seen in the image below.

This is most times because of the app_location: "/" # App source code path in your azure-static-web-apps.yml file. By default, Azure uses / for file path. If like me, you have your files in a src folder, you might want to change the app_location to this app_location: "/src" # App source code path. Push your changes and see your workflow run again.

The beauty of Azure static web service is that, your application deploys automatically after every push or pull request. ofcourse you can also configure this in your .yml file

If you find this helpful, please follow and let's grow together!

Creating S3 Buckets on AWS

Ajanaku Temitope Grace — Sun, 09 Apr 2023 14:26:50 +0000

Simple Storage Service (S3) is a cloud storage solution that offers a lot of flexibility, allowing multiple access irrespective of location. Cloud storage is safer and easier to scale.

Creating an S3 bucket on AWS is a straightforward process. You can follow the steps below:

Step 1: Select S3 on AWS Header

To get started, log in to your AWS account and navigate to the S3 console by selecting S3 from the AWS header. You can also access this from services

Step 2: Create S3 Bucket

Once you are on the S3 console, click on the "Create bucket" button to create a new bucket. The following details are required:

Bucket name: This must be globally unique on AWS. The name must also comply with DNS naming conventions and cannot contain uppercase letters or underscores. A good practice is to use a name that describes the contents of the bucket.
AWS Region: It is important to choose a region closer to your users. The closer the region to the users of the applications, the lower the latency.
Copy settings from an existing bucket (optional): You can choose to copy settings from an existing bucket to this new one, such as permissions and encryption settings.
Access Control list (ACL) options: AWS provides a set of predefined ACL options that define who can access the bucket and the objects within it. You can choose one of the predefined options or define your own.
Block public access (optional): By default, AWS blocks public access to your bucket. You can choose to enable public access for specific users or groups, but it is recommended to keep public access blocked to avoid unauthorized access.
After filling in all the necessary details, click "Create bucket" to create your new S3 bucket.

You can now start uploading files to it by clicking on the bucket name from the S3 console and selecting "Upload" or by using AWS APIs or the AWS CLI.

Did you find this useful? Kindly follow for more!

Creating a Virtual machine on AWS

Ajanaku Temitope Grace — Sun, 09 Apr 2023 13:38:20 +0000

As the name implies, this is a machine that cannot be seen; you can think of it as a digital computer. It can perform the same tasks as your physical computer, and much more. It can connect to networks, store data, and like your physical computer, it requires maintenance and updates.

There are several cloud platforms where you can create your virtual machine, and in this article, we will be focusing on creating a virtual machine on AWS using the following steps.

While you may see the term "Virtual Machine" on platforms like Azure, on AWS, you will see the term "instance". Don't worry, they mean the same thing.

Step 1: Setup your AWS Account.

While this is not a difficult process, you will be required to add a billing card to connect to Amazon Web Services. Amazon will hold on to $1 until the card is successfully verified. Access to Amazon Web Services will not be granted until a billing card has been added and verified. A virtual dollar card can be used for this purpose.

Step 2:

Congratulations on setting up your AWS account! We are now ready to create our first instance aka virtual machine

To create an instance, click on EC2 - Elastic Cloud Compute as seen in the attached image.

You will be routed to the Elastic Cloud compute dashboard.

If not already open, click on the instances drop down and select launch instances.

  Provide all the required details, including:

Instance name
Select your AMI - Amazon Machine Image. Note that this has nothing to do with your physical machine's operating system. For example, you could be using macOS but choose an Ubuntu AMI. If you're using a free AMI, make sure it is eligible for the free tier.
Key pair name - create one if you don't already have it. While this field is not required, it is important, and you will use it when connecting to your virtual machine. The key pair is downloaded as a file with a .pem extension.
Network settings - this is another crucial section. As a cloud engineer, you manage the server via SSH, so be sure to select "Allow SSH traffic from Anywhere" or your specified IP address. Users interact with your machine via HTTPS (Secure Hypertext Transfer Protocol), so to ensure that it is discoverable, select "HTTPS traffic from the internet."
Configure your storage.
You can launch multiple instances at once, so you have the option to input the number of instances you want to launch.
Confirm your details.
Launch your instance.

Step 3: Connect your virtual machine

Route to your instances list and select the instance you want to connect
Click connect instance

We will be using SSH client to connect this on MacOS

Open your SSH client - you can use your terminal
Local your private key file - this is the key pair your created that got downloaded using this command cd downloads (downloads is my file path. Be sure to use yours)
Run this command chmod 400 teminstance.pem - A common mistake to avoid is using the wrong key pair file name. Be sure that is the right name in your file path.
Connect your virtual machine using its public DNS. Sample ssh -i "temiinstance.pem" ubuntu@ec2-54-222-141-75.compute-1.amazonaws.com
Once this is successfully connected, you will see your virtual machine name like below.

Terminating your virtual machine

It is important to terminate or stop instances you are not using to avoid incurring unnecessary bills. To stop or terminate your instance, check the instance and click the instance state. You can select the action you want.

Be sure to choose "Stop" only if you still care about the data on your virtual machine. If you choose to "Terminate," you will lose all the data.

I hope you find this information helpful. Kindly follow for more.