Background

What means "Deploying an application"?
When studying programming, a concept of "deployment" comes up often, but it might be a bit difficult for beginners who don't have much opportunity to make software for others use. However, it is unnecessary to think it hard at the beginning, but it would be good to understand the concept of "deployment" as "a process to allow other users to use my program."

Through the deployment of a web application, users on the Internet can access some URL through a browser and experience the website I have built.

How do I allow other users to access web apps (mainly consists of HTML,
Javascript, CSS files, etc.) that I built in a local environment through the Internet?
In the past, I might have to purchase a server, install Linux, and install a web
server to manage the http request requested from the Internet, etc. However, most of these processes seem unnecessary with the advent of cloud services.
Now we make a web app in the local environment, upload the code to the cloud, and then the cloud service will take care of the rest and create a URL that can be accessed from outside.🎁 Of course, the source codes we created are automatically built and stored on a cloud server.

App developers upload only the source code and everything is taken care of in
the cloud (server provisioning and creation, deployment environment configuration and installation, etc.). This service is also called Platform as a Service (PaaS). In this posting, I will introduce on of the popular PaaS, Heroku Service, by deploying a simple web application.

Prerequisite

There are various deployment methods, but let's use the most popular method,
deployment using Git. It requires prior knowledge about Git Flow, but I'll leave a post for this later in the future. If you folow the process blow step by step, you can easily make it.

Create account at GitHub / Heroku

Obviously, you need to have a GitHub and Heroku account to follow the rest.
Please access the GitHub , Heroku site and create an account first.

Download Heroku CLI

Most of the deployment work is done through the CLI (Command Line Interface) environment. Download and install the Heroku CLI according to your OS from
Heroku Dev Center. If the installation is successful, you can check it with the following command in the command window.


heroku -v


(out)heroku/7.47.0 win32-x64 node-v12.16.2

Generate SSH public key

Since you need to communicate with the Heroku cloud with the CLI environment, you must register an SSH key. If the existing public key is on your local computer, you can simply register it by using the heroku keys:add command. (The registration process will be explained later.)
If you do not have a public key, you can create a key according to the Heroku
Official Site Manual.

Let's Deploy our App!

Preparing the web application to be deployed

The app to be distributed on the Heroku cloud is a webcam image classification
app that I have introduced in previous postings. It is a really simple app composed of HTML, Plain Javascript, and CSS.😁
The most important part is that it has a "static" characteristic. In the case of
apps that have dynamic routing or that communicate with a backend server (authentication, database, etc.), additional Heroku settings must be added, making it difficult to deploy using the method described here.

Building webcam image classification app using Tensorflow js (mobilenet application)
Create an image classifier app for browser using the JavaScript API of the Mobilenet V1 from Tensorflowjs library.
izy.codesizycodes

Re-organize our app structure

As mentioned above, Deploying a static web app to the Heroku service is simple but has some peculiar aspects. The method I found in google is deploying through a form of PHP application. In order to make Heroku server recognize our app as PHP application, some extra work is to be done prior to upload code to server.
Add the following php file to your project's root directory (the file containing our application is "index.html", so I specify it in the code)

<?php include_once("index.html"); ?>
index.php

I created the following file so that the Heroku server can recognize our code as a PHP app.

{}
composer.json
project_folder/
|-- .git/
|-- composer.json
|-- index.css
|-- index.html
`-- index.php

Deployment flow using Git

Now let's move on to deploying to Heroku via Git. I summarized the distribution flow through a simple diagram below. The key part is that we upload the code from our locally created Git repository to the remote repository on the Heroku server in much the same way as we upload (push) the code to the remote repository on GitHub.
One point to note is that you create an empty repository via the heroku create command and push the code in the next step.

Deployment flow using Git

With this flow on your mind, follow the command line below step by step.

  • heroku login
    Log in to your Heroku account through CLI.

heroku login


(out)heroku: Press any key to open up the browser to login or q to exit:
(out)Opening browser to https://cli-auth.heroku.com/auth/cli/...
(out)Logging in... done
(out)Logged in as ***@***.***
  • heroku keys:add
    Register the SSH public key created in advance. It automatically finds the location of the file, so if you have created it, you can go directly to "Yes".

heroku keys:add


(out)Found an SSH public key at C:\Users\***\.ssh\id_rsa.pub
(out)? Would you like to upload it to Heroku? Yes
(out)Uploading C:\Users\***\.ssh\id_rsa.pub SSH key... done
  • heroku create
    Create a new empty application on the Heroku server and create a remote git repository.
    When you run the command, the url that appears is the deployment url of the created web application, and the address of the created remote git repository is also displayed.
    If you want to create an app with a specified name, you can use heroku create <app-name> or heroku apps:create <app-name> command.
    Note that the project's code has not yet been deployed to the heroku server, so accessing the application url will not yield any results.
    In my case, the app was created with the address https://fast-hollows-18418.herokuapp.com/. (The next url is the remote git
    repository address.)

heroku create


(out)Creating app... done, β¬’ fast-hollows-18418
(out)https://fast-hollows-18418.herokuapp.com/ | https://git.heroku.com/fast-hollows-18418.git

I can verify that a remote repository named "heroku" is associated with my local repository with the following git command.


git remote -v


(out)heroku  https://git.heroku.com/fast-hollows-18418.git (fetch)
(out)heroku  https://git.heroku.com/fast-hollows-18418.git (push)
  • Source code push(git push)
    Now push the committed code from the current local git repository to a remote
    repository named "heroku".
    In my case, the current branch was "main", so I specified branch name "main" in the command.
    As you can see from the output content, you can see that it is recognized as a PHP runtime and goes through the Build process.

git push heroku main


(out)Enumerating objects: 8, done.
(out)Counting objects: 100% (8/8), done.
(out)Delta compression using up to 4 threads
(out)Compressing objects: 100% (6/6), done.
(out)Writing objects: 100% (8/8), 1.87 KiB | 637.00 KiB/s, done.
(out)Total 8 (delta 0), reused 0 (delta 0)
(out)remote: Compressing source files... done.
(out)remote: Building source:
(out)remote:
(out)remote: -----> PHP app detected
(out)remote: -----> Bootstrapping...
(out)remote: -----> Installing platform packages...
(out)remote:        NOTICE: No runtime required in composer.lock; using PHP ^7.0.0
(out)remote:        - php (7.4.11)
(out)remote:        - apache (2.4.46)
(out)remote:        - nginx (1.18.0)
(out)remote: -----> Installing dependencies...
(out)remote:        Composer version 1.10.13 2020-09-09 11:46:34
(out)remote: -----> Preparing runtime environment...
(out)remote:        NOTICE: No Procfile, using 'web: heroku-php-apache2'.
(out)remote: -----> Checking for additional extensions to install...
(out)remote: -----> Discovering process types
(out)remote:        Procfile declares types -> web
(out)remote:
(out)remote: -----> Compressing...
(out)remote:        Done: 14.1M
(out)remote: -----> Launching...
(out)remote:        Released v3
(out)remote:        https://fast-hollows-18418.herokuapp.com/ deployed to Heroku
(out)remote:
(out)remote: Verifying deploy... done.
(out)To https://git.heroku.com/fast-hollows-18418.git
(out)[new branch]      main -> main
  • heroku open
    Once the build process is done on the Heroku server based on the pushed code, our web app will be accessible to internet.
    You can access the app url created through the heroku create command from the browser, or if you enter the command below, the browser will automatically connect to the app!πŸ˜™

heroku open
The deployed app works fine. Now you can access anywhere with the url.

Configuration of the deployed app can be managed in the Dashboard in the Heroku Dev Center. If you click the app just created, you can check the various settings of the deployed app container.

You can check various setting environments of the app through dashboard

Wrap-up

Since the app deployed through this project uses the free plan of the Heroku cloud service, its limited computing power are not suitable for access by many users. However, if you switch to a paid plan and expand the app performance (Scaling), it seems that it will be a powerful app that can be used broadly.
Although this deployment method using Git may seem complicated, the use of Git itself is quite common, and the actual deployment process of many websites we encounter has many similar processes, so it is personally recommended to practice it once.
Thanks for reading the long post. Everyone, enjoy Coding~😎