Containerizing React application on Windows10 then shipping the dockerized container to Ubuntu server for production

Introduction

Hi everyone, this is Mohamed Alomar from GeekFeed.

This blog covers the process of creating React docker container on Windows machine, and then transferring that container to Ubuntu server through secure server-client synchronized connection.

Prerequisites 

Before we start, make sure you have the following applications and packages are installed on your Windows 10 machine:

also you will need to have:

Ubuntu 20.04 Server running Edition

In this blog I use Alibaba Clouding provider to get running Ubuntu kernel , but of course you are free to choose whatever clouding provider you wish.

Getting started

Installing create-react-app command  

Open Windows terminal and run the following command,

 

Creating new React application

Creating a Production build folder of  our app

By executing the following command, build folder will be generated, this folder is used during the  process of putting our React app for production.

Set up Docker files

Add following files to the root folder of our application

docker-compose file  

app.docker file 

web.docker file

nginx.conf

Run the Docker container 

In  the root folder, run the following command

the previous command will build our docker container that consists of two docker images:

  • app docker image.
  • web docker image.

docker commit

In order to transfer and run our docker container on Ubuntu server, we should have the physical file of  that container, so it can be transferred via rsync command which we will explain about it in next section of this  blog.

In order to get that file, run the next commands

docker ps  will display list of  all running containers with their IDs.

Note: since the  purpose of  this  blog  is to ship React app to Ubuntu server only for production(not to save the entire React application files), then we will  ship only nginx_server container to Ubuntu.

Therefore, choose the id of nginx_server container which we have already created and run the following :

docker save

after running the previous command, new  image will be added to docker list of images, this  image  is  built based on  nginx_server container.

the previous command will list up all docker images you have on your Windows machine, choose the  image name that we have  just created and  run the following to get tar file that has inside of  it the  physical file of  nginx_server container.

the entire process will be something like this:

Container volumes :

Preparing our container for migration is not enough to get it running on Ubuntu, there are some folders and files on local storage of Windows were bounded to nginx_server  container during container creation process, and  these files and folders are being used by nginx_server  container as  it is running, so we have to share a copy of these files and folders with Ubuntu server.

to get names and physical locations of these files and  folders

run the following command:

These are  the two files that we need to copy over to the Ubuntu server, to make sure  that  Ubuntu server  getting  the data moving with  nginx_server container as well.

 

Transferring our container and its volumes to Ubuntu

In order to transfer data from Windows machine to Ubuntu securely, we have to establish a secure client-server synchronized connection between these two machines by following the steps below:

Generate key pair connection

Creating the key pair

on the local terminal of your Windows machine type and  run the following command

a confirmation message will show up to inform you that the generation process has begun, choose the default options without adding passphrase, and you will end up having the required keypair for synchronized connection.

the entire key generation process looks like this:

Copying  the public key to Ubuntu server

After generating the key pair you should copy the public key to Ubuntu server while keeping the private connection key on your local Windows.

This can be done using  ssh-copy-id command, However, this command is  Linux command and  not supported by Windows  so there is a need  to use a third party program like Git bash

after the  installation process is  completed,  navigate the the folder in which your public key resides, open Git bash terminal, and  run the following  command

Rsync Command

this command is natively available on Linux and Mac but for Windows you have  to install third party program I used in this blog  Cygen  to run rsync command, and you are  free to choose another program to run rsync command on Windows.

note: when installing Cygen  there is  no need to select all the commands we need to use only:

  • rsync 3.2.3
  • openssh 8.7p1-1

after the installation process is completed, open Cygen terminal and  run the following command

Loading and running docker container on Ubuntu

 

ssh to your ubuntu server ,open command prompt and run the following commands:

docker images

 

Importing and loading  the image does not automatically starting the container for you,

so we need use another docker command to run out our loaded image:

 

The long number shown on the terminal represents our container ID on Ubuntu and  indicates that Docker started our container in the background.

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
サイト管理者
サイト管理者
株式会社ギークフィードのサイト編集担当者です。 弊社へのお問い合わせ・質問は、お問い合わせページからお願いいたします。

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ