How to deploy a frontend react application to Naver Cloud Platform ?

Naver Cloud Platform (NCP) is a comprehensive cloud computing service provided by Naver Corporation, a leading South Korean technology company. NCP offers a wide range of cloud services designed to meet various computing needs for businesses, developers, and IT professionals.

We're going to use "Naver Cloud Server" (NCS). to deploy our frontend application.

But before that you needed a naver cloud account.

Setting Up Naver Cloud Environment

1 : Create a Naver Cloud Account.

• Sign up for a Naver Cloud account if you don't already have one.

• Log in to the Naver Cloud Platform console.

2 : Create a Server

Step 1 : Select server image

• In the Naver Cloud Platform Console, click Services > Compute > Server > [Create Server]

• After selecting the server image to install on the server, click the [Next] button.

Step 2 : Server Settings

• Please click test in VPC .

• In Subnet, click test-public .

• For Storage Type , please click SSD .

  • For services requiring high-performance I/O , click SSD . For general services, click HDD .

  • SSD servers do not support Micro type servers.

• Please select the server type as Standard and [Standard] 2 vCPUs , 8GB memory , and 50GB [SSD] disk [g2] .

• In Select a Plan, click Monthly Plan .

• Please enter 1 for the number of servers .

• Please enter ncloud in the server name .

  • The server name is a name used to distinguish servers and cannot be used repeatedly.

• Click the [Add] button in Network Interface and then click the [Next] button.

  You can add up to 3 Network Interfaces per server.

Step 3 : Set the authentication key

• To access the server, click Create new authentication key , enter ncloud-quick-guide in the Authentication key name, and then click the [Create and save authentication key] button.

  • The generated authentication key is automatically saved in the download folder on the user's PC.

  • If you already have an authentication key, click Use an existing authentication key and select the authentication key you want to use.

• Once you have completed creating and saving the authentication key, click the [Next] button.

• 

Step 4 : Set up network access

• • Please select the test-default-acg ACG from the ACGs you have .

    * ACG is an IP/Port-based filtering firewall service for server access control.

    * If you want to restrict the network in the future, please refer to the ACG User Guide to create a new ACG.

Please click the [Next] button.

Step 5 : Final Check

• After finalizing the settings, click the [Create Server] button.

• When a pop-up window appears during server creation, click the [OK] button.

  It may take several minutes to several tens of minutes for the server to be created.

• In the server list, the server status will change in order from Creating , Booting , and Setting up . When it changes to Operating, server creation is complete.

Now finally you have created a server. Now how can we setup a server connection?

For that we have to follow some setups.

Server connection environment settings

Step 1 : Apply for and allocate a public IP

To use a server for service purposes or to access a server created in a VPC environment, you must apply for a public IP address for the server and assign it to the server.

• In the Naver Cloud Platform Console, click Services > Compute > Server > Public IP > [Apply for Public IP] .

• In Select Applicable Server, select the server to which you want to assign a public IP, then click the [Next] button.

• After checking the settings, click the [Create] button.

Step 2 : ACG Settings

To connect to a server, you must have an RDP ('TCP/3389') rule set up in the server's ACG.

• In the Naver Cloud Platform Console, click the Services > Compute > Server > ACG menu.

• After selecting ncloud-default-acg from the ACGs you have , click the [ACG Settings] button.

• Please add the following ACG rules:

  • Protocol: TCP

  • Access source: 0.0.0.0/0

  • Allowed Port: 3389

• After checking the settings, please click the [Apply] button.

Step 3 : Confirm the administrator password

• Click to select the server (ncloud) you want to connect to, then click [Manage servers and change settings] > Confirm administrator password .

• Please check the authentication key name registered when creating the server and attach the authentication key file.

• Please click the [Confirm Password] button.

• After confirming the server name, administrator name, and password, click the [Confirm] button.

  • Please copy and save your password separately as it is required to access the server.

Now after doing all the important setups. Its time to enable a server connection.

Server connection

Step 1 : Connect to terminal

• Click on the server (ncloud) you want to connect to to select it, and check the public IP in the details .

• After installing and running the terminal connection program, enter the public IP of the connection server and enter '22' as the external port information.

  • This guide explains how to use the Putty program.

  • Download terminal connection program (Putty): https://www.putty.org

• Please enter your user information and password and log in.

  • Login as: root

  • password: Password copied during the administrator password confirmation step

• After logging in, please change your password by entering the command below.

•     passwd root
  

Now as you are connected to your instance and able to access the terminal, You can pull your frontend code from github or any version control environment and run the project.

You can follow the below steps :

• Clone your GitHub repository:

•     git clone https://github.com/your-username/your-repo.git
  

• Navigate to the project directory:

•     cd your-repo
  

• Install PM2 and Run Your Project

  Install Node.js and npm

•     sudo apt install nodejs npm
  

  Install PM2 Globally

•     sudo npm install -g pm2
  

  Install Project Dependencies

• Install dependencies:

•     npm install
  

  Build Your Project

• Create a production build

•     npm run build
  

  Start the Project with PM2

• Start the application with PM2:

•     pm2 serve build 3000 --name "react-app"
  

  Configure PM2 to Start on Boot

• Save the PM2 process list:

•     pm2 save
  

  Set PM2 to start on boot:

•     pm2 startup
  

  Conclusion

  By following these steps, you have successfully deployed your React application on Naver Cloud Platform and ensured it runs continuously using PM2. This setup can be adapted for various environments and configurations.

Happy coding ;)