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


Step 1: Install Packer

  1. 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(''))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
  1. verify chocolatey is installed by running this command choco -v. you should get the version of chocolatey installed
  2. Install packer by running the command below
  • choco install packer
  1. To verify packer installation, run
  • packer -v
  1. You should get the version of Packer installed.
  1. 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"
  1. Install packer by running the command below
  • brew install packer
  1. To verify packer installation, run
  • packer -v
  1. You should get the version of Packer installed.

Step 2: Build Our React-Application Machine Image

  1. 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": "" },{ "type": "ansible", "playbook_file": "playbook.yml" }] }
  1. 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.
  2. 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.
  3. 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.
  4. Export the ALICLOUD_ACCESS_KEY and ALICLOUD_SECRET_KEY by running the command below in your terminal
  1. 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: "" state: present - name: Add nodejs LTS to apt repository apt_repository: repo: "deb{{ 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 ''; } } 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
  1. To validate our template file, run packer validate example.json. This ensure there are no errors such as syntax error with our template file.
  2. Run packer build example.json to build our ReactJS image.

Step 3: Launch an Instance with Our React Image

  1. Logon to Alibaba Cloud console
  2. Click on Elastic Compute Service on the side navigation bar of the dasboard.
  3. Click on the button with the Create Instance description or this link to create an instance
  4. In Basic Configurations, do the following:
  5. For the Billing Method click on Pay-As-You-Go
  6. For the Region, click on the dropdown and select US West 1 (Silicon Valley)
  7. For the Instance Type, click on Entry-level (Shared)
  8. 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.
  9. Click on the Next: Networking button
  10. For the second step, which is Networking follow the steps below
  11. For the Network` section, click on the VPC dropdown menu and select the default VPC.
  12. For the Security Group section, click on the Go to port settings to set the port for our application.
  13. Click on the Add Security Group Rule and set Port Range to 80 and Authorization Objects to 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.
  14. After setting the security group, click on the Next: System Configurations button
  15. For the third step, which is System Configurations follow the steps below
  16. 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
  1. The script above runs when creating our instance so we do not need to SSH into our instance to start the application
  2. Click on the Preview button
  3. Accept the Terms of Service and click on the Create Instance button.
  4. 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.




Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create Resizable Table Columns with Angular Directives

Deno API Server how to code the Middleware

Using ArangoDB within a NodeJS App

How to Run and Debug a Single TypeScript File in WebStorm IDE

Benefits of using Redux

OAuth Explained In 4 Minutes

The Curious Case Of A Number In Javascript That Is Not Equal To Itself.

A laptop with ceramic watch on the desk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:

More from Medium

Introduction to Redis, Installing it locally to write and read from node JS

NoSQL Database | MongoDB

Deploy React on Heroku server using Docker image

Easy Filter Mongo(ose) Documents