Creating a React JS Application Image with Packer and Ansible on Alibaba Cloud

In this guide, we will talk about using Packer to build a machine image on Alibaba Cloud ECS instance, and Ansible for writing what we want our machine image to have.

By Sanni Kehinde, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud's incentive program to encourage the sharing of technical knowledge and best practices within the cloud community.

Packer is an open source tool for creating identical machine images for multiple platforms from a single source configuration. Packer is lightweight, runs on every major operating system, and is highly performant, creating machine images for multiple platforms in parallel.

Ansible is an open source software that automates software provisioning, configuration management, and application deployment. Ansible connects via SSH, remote PowerShell or via other remote APIs.

In this guide, we will talk about using Packer to build a machine image on Alibaba Cloud Elastic Compute Service (ECS), and Ansible for writing what we want our machine image to have. We will be building an image that has a react JS application and nodejs setup. Machine image in DevOps is a single static unit that contains a pre-configured operating system and installed software which is used to quickly create new running machines. Machine image formats change for each platform.

Prerequisites

You don't need to be an expert to follow this guide, All you need to have is an account on Alibaba Cloud and an Access key. Click on this link to see how to create an access key on Alibaba cloud.

Step 1: Install Packer

To install packer on our system, we can follow the official installation page for packer or use a package manager, chocolatey for windows and homebrew for macOS. Using a package manager saves us from the hassle of adding environment variables to path.

To install packer on windows using chocolatey

Install chocolatey package manager. To install chocolatey, Open your cmd as an administrator and paste the command below to install chocolatey package manager

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

verify chocolatey is installed by running this command choco -v. you should get the version of chocolatey installed
Install packer by running the command below
```
choco install packer
```
To verify packer installation, run
```
packer -v
```
You should get the version of Packer installed.

A Gif image showing the installation process

To install packer on MacOS using homebrew

Install homebrew if you don't have it installed already. To install homebrew on your macOS, open your terminal and paste the command below
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
Install packer by running the command below
```
brew install packer
```
To verify packer installation, run
```
packer -v
```
You should get the version of Packer installed.

Gif image showing installation on MacOS

Step 2: Build Our React-Application Machine Image

To build a machine image, we need to create a template file. The template file is used to define what image we want to build. The template file is in a JSON format and has a different set of keys configuring various components of Packer.

Create a template file named example.json and paste the code below

    {
      "variables": {
        "access_key": "{{env `ALICLOUD_ACCESS_KEY`}}",
        "secret_key": "{{env `ALICLOUD_SECRET_KEY`}}"
      },
      "builders": [{
        "type": "alicloud-ecs",
        "access_key": "{{user `access_key`}}",
        "secret_key": "{{user `secret_key`}}",
        "region": "us-west-1",
        "image_name": "ReactJS-Application",
        "instance_type": "ecs.t5-lc2m1.nano",
        "source_image": "ubuntu_16_0402_32_20G_alibase_20180409.vhd",
        "io_optimized":"true",
        "image_force_delete":"true",
        "ssh_username": "root",
        "internet_charge_type": "PayByTraffic"
      }],
      "provisioners": [{
        "type": "shell",
        "script": "installAnsible.sh"
       },{
       "type": "ansible",
      "playbook_file": "playbook.yml"
     }]
    }

The variables section is where we defined our variables which can be used anywhere within our template file. we are getting the value of the access_key and secret_key from the environment variable by specifying the env function.

The builders section contains an array of JSON objects configuring a specific builder. A builder is a component of packer that is responsible for creating a machine and turning that machine into an image.

The provisioners section uses builtin and third-party software to install and configure the the machine image after booting. In this guide, we would be using ansible and shell as our provisioner.

Export the ALICLOUD_ACCESS_KEY and ALICLOUD_SECRET_KEY by running the command below in your terminal

   export ALICLOUD_SECRET_KEY="YOUR_ALICLOUD_ACCESS_KEY"
   export ALICLOUD_SECRET_KEY="YOUR_ALICLOUD_SECRET_KEY"

Create a new Ansible file named playbook.yml and paste the code below. example.json and playbook.yml are to be created in the same directory or folder.

   ---
     - hosts: all
       become: true

       vars:
         NODEJS_VERSION: 8
         domain: "localhost"

       tasks:
       - name: Add gpg key for nodejs
         apt_key:
           url:  "https://deb.nodesource.com/gpgkey/nodesource.gpg.key"
           state: present
       - name: Add nodejs LTS to apt repository
         apt_repository:
           repo: "deb https://deb.nodesource.com/node_{{ NODEJS_VERSION }}.x {{ ansible_distribution_release }} main"
           state: present
           update_cache: yes
       - name: Install nodejs
         apt:
           name: nodejs
           state: present
       - name: Setup React application
         shell:
            cmd: |
              npx create-react-app my-app # Setup our react application
              cd /root/my-app
              npm install -g pm2   # Install Pm2, A nodejs process manager which enables us to run our application in the background process
       - name: Install nginx
         apt:
           name: nginx
           state:  present
           update_cache: yes
       - name: Remove nginx default configuration
         file:
           path: /etc/nginx/sites-enabled/default
           state: absent
       - name: enable reverse proxy # This enables us to use the public IP without passing in the port on our browser address bar
         shell:
           cmd: |
             cat > /etc/nginx/sites-available/my-app <<EOF
             server {
               listen 80;
               server_name {{ domain }};
               location / {
                 proxy_pass 'http://127.0.0.1:3000';
               }
             }
             EOF
       - name: create symlinks for nginx configuration # make sure the nginx configuration files are always the same.
         file:
           src:  /etc/nginx/sites-available/my-app
           dest: /etc/nginx/sites-enabled/my-app
           state: link
         notify:
         - restart nginx
       handlers:
         - name: restart nginx # restart nginx service
           service:
             name: nginx
             state: restarted

To validate our template file, run packer validate example.json. This ensure there are no errors such as syntax error with our template file.
Run packer build example.json to build our ReactJS image.

Step 3: Launch an Instance with Our React Image

To create an instance using the image we created earlier, follow the steps below

Logon to Alibaba Cloud console
Click on Elastic Compute Service on the side navigation bar of the dasboard.
Click on the button with the Create Instance description or this link to create an instance
In Basic Configurations, do the following:
1. For the Billing Method click on Pay-As-You-Go
2. For the Region, click on the dropdown and select US West 1 (Silicon Valley)
3. For the Instance Type, click on Entry-level (Shared)
4. For the Image, click on the Custom Image button. Under Custom Image, click on the dropdown menu and select the image we created which is ReactJS-Application.
5. Click on the Next: Networking button
For the second step, which is Networking follow the steps below
1. For the Network` section, click on the VPC dropdown menu and select the default VPC.
2. For the Security Group section, click on the Go to port settings to set the port for our application.
3. Click on the Add Security Group Rule and set Port Range to 80 and Authorization Objects to 0.0.0.0/0. Repeat this same process but set the Port Range to 3000.
  Port 80 is for the HTTP request while Port 300` is the port on which our react application is running.
4. After setting the security group, click on the Next: System Configurations button
For the third step, which is System Configurations follow the steps below
1. Click on the Advanced (based on instance RAM roles or cloud-init) dropdown and paste the code below into the user data field box
```
#!/usr/bin/env bash
cd /root/my-app
pm2 start /root/my-app/node_modules/react-scripts/bin/react-scripts.js --name my-app -- start
```
  The script above runs when creating our instance so we do not need to SSH into our instance to start the application
Click on the Preview button
Accept the Terms of Service and click on the Create Instance button.
Once your instance is up and running, copy the internet IP address and paste it into your browser address bar. You should see a React application web page.

Here is a gif image showing the process of launching an instance

Community

Creating a React JS Application Image with Packer and Ansible on Alibaba Cloud

Prerequisites

Step 1: Install Packer

Step 2: Build Our React-Application Machine Image

Step 3: Launch an Instance with Our React Image

Read previous post:

Read next post:

Alibaba Clouder

You may also like

Comments

Alibaba Clouder

Related Products

ECS(Elastic Compute Service)

OSS(Object Storage Service)