Skip to main content

Deploy react app on digitalocean using nginx



Source: https://www.learnwithjason.dev/blog/deploy-nodejs-ssl-digitalocean/

Source: https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-16-04


https://dev.to/xarala221/the-easiest-way-to-deploy-a-react-web-application-2l8a

1. Create a new droplet on DigitalOcean.

Choose the $5/month option with Ubuntu 16.04.1 x64. Select a region closest to your users.













2. Finally, add your SSH key and


   ls -la ~/.ssh



 # This copies the key so you can paste with command + V



 pbcopy < ~/.ssh/id_rsa.pub







# This prints it in the command line for manual copying

cat ~/.ssh/id_rsa.pub 

3. Add your SSH key to the droplet
Click “Add SSH Key” to save it, then make sure it’s selected, name your droplet, and hit the big “Create” button to get your server online.

Your new droplet will display its IP address once it’s set up. You can click on it to copy the IP to your clipboard.

4. Connect to the server using SSH


 # Make sure to replace the IP below with your server's IP address



ssh root@192....

5. Configure the server with basic security.

Create an SSH user


# You can choose any username you want here.



adduser jason




 root@nodejs-ssl-deploy:~# id jason



 uid=1000(jason) gid=1000(jason) groups=1000(jason)




 # Don't forget: use your own username here



 usermod -aG sudo jason




 root@nodejs-ssl-deploy:~# id jason



 uid=1000(jason) gid=1000(jason) groups=1000(jason),27(sudo)

Add your SSH key for the new user


# Become the new user



 su - jason







# Create a new directory for SSH stuff



 mkdir ~/.ssh







# Set the permissions to only allow this user into it



 chmod 700 ~/.ssh







# Create a file for SSH keys



 nano ~/.ssh/authorized_keys




# Set the permissions to only allow this user to access it



chmod 600 ~/.ssh/authorized_keys







# Stop acting as the new user and become root again



exit

Disable password login

Since every server has a default root account that’s a target for automated server attacks — and because that account has unlimited power inside the server — it’s a good idea to make sure no one can use it.

# Log out of the server as root



exit







# Log into your server as the new user



ssh jason@138.68.11.65




sudo nano /etc/ssh/sshd_config

Test your login by opening a new tab in Terminal (command + T on Mac) and logging into your server again.
If we log in as our new user, everything works as expected. However, if we try to log in as root, we get an error:

$ ssh root@138..



Permission denied (publickey).

Set up a basic firewall


# Enable OpenSSH connections



sudo ufw allow OpenSSH







# Enable HTTP traffic



sudo ufw allow http







# Enable HTTPS traffic



sudo ufw allow https







# Turn the firewall on



sudo ufw enable




jason@nodejs-ssl-deploy:~$ sudo ufw status



Status: active







To                         Action      From



--                         ------      ----



OpenSSH                    ALLOW       Anywhere



80                         ALLOW       Anywhere



443                        ALLOW       Anywhere



OpenSSH (v6)               ALLOW       Anywhere (v6)



80 (v6)                    ALLOW       Anywhere (v6)



443 (v6)                   ALLOW       Anywhere (v6)

Get Your App Up and Running

Install Git.


sudo apt-get install git









jason@nodejs-ssl-deploy:~$ git --version



git version 2.7.4

Verify Installation

command -v nvm



You can list available versions using ls-remote:
nvm ls-remote
And then in any new shell just use the installed version:
nvm use node
sudo apt install npm
nvm -bash: nvm: command not found
No .nvmrc file found

mkdir -p ~/.nvm/versions






Automatic Version Switching for Node.js

1.curl https://raw.githubusercontent.com/creationix/nvm/v0.18.0/install.sh | bash
2. export NVM_DIR=~/.nvm
source ~/.nvm/nvm.sh

Step 1 – Installing Nginx

  • sudo apt update
  • sudo apt install nginx


 nano file save and exit
ctrl+0, ctrl+enter, ctrl+x

How To Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu 16.04


Step One: Set Up New Document Root Directories


  • 1. sudo mkdir -p /var/www/example.com/html
  • sudo mkdir -p /var/www/test.com/html

 2. 
  • sudo chown -R $USER:$USER /var/www/example.com/html
  • sudo chown -R $USER:$USER /var/www/test.com/html

 3. 
    

  • sudo chmod -R 755 /var/www
    •

Step Two: Create Sample Pages for Each Site


4. 
    

  • nano /var/www/example.com/html/index.html
    •
5. /var/www/example.com/html/index.html
<html>
    <head>
        <title>Welcome to Example.com!</title>
    </head>
    <body>
        <h1>Success!  The example.com server block is working!</h1>
    </body>
</html>
6. 
    

  • cp /var/www/example.com/html/index.html /var/www/test.com/html/
    •
7. 
    

  • nano /var/www/test.com/html/index.html
    •
8. 
/var/www/test.com/html/index.html
<html>
    <head>
        <title>Welcome to Test.com!</title>
    </head>
    <body>
        <h1>Success!  The test.com server block is working!</h1>
    </body>
</html>

Step Three: Create Server Block Files for Each Domain


9.
    

  • sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example.com

    • 

  •
10. 
    

  • sudo nano /etc/nginx/sites-available/example.com

    • 

  •
11.
/etc/nginx/sites-available/example.com
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
}

Create the Second Server Block File


12.
    

  • sudo cp /etc/nginx/sites-available/example.com /etc/nginx/sites-available/test.com

    • 

  •
13. 
    

  • sudo nano /etc/nginx/sites-available/test.com

    •
/etc/nginx/sites-available/test.com
server {
        listen 80;
        listen [::]:80;

        root /var/www/test.com/html;
        index index.html index.htm index.nginx-debian.html;

        server_name test.com www.test.com;

        location / {
                try_files $uri $uri/ =404;
        }
}

Step Four: Enable your Server Blocks and Restart Nginx

  • sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
  • sudo ln -s /etc/nginx/sites-available/test.com /etc/nginx/sites-enabled/

 
    

  • sudo nano /etc/nginx/nginx.conf

    • 

  •
sudo nginx -t

 To restart Server:
    

  • sudo systemctl restart nginx

    • 

  •
or
sudo service nginx restart

Step Five: Modify Your Local Hosts File for Testing(Optional)

    

  • sudo nano /etc/hosts

    • 

  •
/etc/hosts
127.0.0.1   localhost
. . .

203.0.113.5 example.com www.example.com
203.0.113.5 test.com www.test.com

Step Six: Test your Results

http://example.com

Now, Github repository to server
Create React app and build it:
npm install -g create-react-app
create-react-app react-app
cd react-app
npm run build


Note:
we deploy to home folder of deploy user
sudo service nginx restart (to restart nginx)
cd ~

capistrano to deploy to the server 


 https://medium.com/alturasoluciones/deploy-react-apps-in-ubuntu-using-nginx-and-capistrano-93f8f9a587b6


Starting:

1  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    2  su root
    3  exit
    4  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    5  cd
    6  mkdir .ssh
    7  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    8  chmod 700 .ssh
    9  chmod 600 .ssh/authorized_keys
   10  sudo chmod 600 .ssh/authorized_keys
   11  ls
   12  exit
   13  ls
   14  cd
   15  ls -la
   16  cd .ssh/
   17  chmod 600 authorized_keys 
   18  sudo chmod 600 authorized_keys  authorized_keys 
   19  ls
   20  ls -la
   21  sudo chown $USER authorized_keys 
   22  cd ..
   23  ls -la
   24  sudo reboot
   25  ls
   26  sudo su deploy
   27  nvm -v
   28  nvm use node
   29  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
   30  setfattr -n user.pax.flags -v "mr" $NVM_DIR/nvm.sh
   31  nvm --version
   32  source ~/.bashrc
   33  nvm --version
   34  clear
   35  nvm use 14.4.0
   36  nvm install v14.4.0
   37  clear
   38  touch /home/deployer/ReactAppDeploy/ReactAppDeploy/shared/.env
   39  npm install -g yarn
   40  yarn -v
   41  sudo apt update
   42  sudo apt install nginx
   43  ls
   44  cd ReactAppDeploy/
   45  ls
   46  cd ReactAppDeploy/
   47  ls
   48  cd current
   49  ls
   50  cd build
   51  ls
   52  cd ..
   53  cd /etc/
   54  cd nginx/site-available
   55  cd nginx/sites-available
   56  clear
   57  ls
   58  sudo nano reactapp
   59  ls
   60  cd reac-app
   61  clear
   62  sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
   63  ls
   64  sudo ln -s /etc/nginx/sites-available/reactapp /etc/nginx/sites-enabled/
   65  sudo nginx -t
   66  sudo service nginx restart
   67  ls
   68  cd reactapp
   69  sudo nano reactapp
   70  sudo service nginx restart
   71  sudo nano reactapp

   72  history

OR 
 1  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    2  su root
    3  exit
    4  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    5  cd
    6  mkdir .ssh
    7  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    8  chmod 700 .ssh
    9  chmod 600 .ssh/authorized_keys
   10  sudo chmod 600 .ssh/authorized_keys
   11  ls
   12  exit
   13  ls
   14  cd
   15  ls -la
   16  cd .ssh/
   17  chmod 600 authorized_keys 
   18  sudo chmod 600 authorized_keys  authorized_keys 
   19  ls
   20  ls -la
   21  sudo chown $USER authorized_keys 
   22  cd ..
   23  ls -la
   24  sudo reboot
   25  ls
   26  sudo su deploy
   27  ls
   28  cd home/
   29  cd /home
   30  cd ..
   31  pwd
   32  cd 
   33  pwd
   34  ls
   35  cd ReactAppDeploy/
   36  ls
   37  cd ReactAppDeploy/
   38  ls
   39  cd current
   40  ls
   41  cd build
   42  ls
   43  pwd

   44  history
Final:
(server)
   1  exit
    2  chmod 700 .ssh
    3  mkdir .ssh
    4  clear
    5  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
    6  chmod 700 .ssh
    7  chmod 600 .ssh/authorized_keys
    8  cd ..
    9  ..
   10  cd .ssh
   11  ls .ssh/
   12  sudo ls .ssh/
   13  sudo ls .ssh/ authorized_key
   14  exit
   15  sudo - deploy
   16  clear
   17  mkdir .ssh
   18  chmod 77 .ssh
   19  mkdir .ssh
   20  nano .ssh/authorized_keys
   21  clear
   22  ls
   23  clear
   24  ssh-keygen -t rsa
   25  ls
   26  mkdir .ssh
   27  clear
   28  chmod 700 .ssh
   29  sudo chown $USER -R .ssh
   30  cd .ssh/
   31  ls .ssh/
   32  cd ..
   33  clear
   34  mkdir .ssh
   35  chmod 700 .ssh
   36  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
   37  chmod 700 .ssh
   38  chmod 600 .ssh/authorized_keys
   39  clear
   40  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
   41  su root
   42  sudo root
   43  su root
   44  clear
   45  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
   46  su root
   47  exit
   48  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
   49  su root
   50  exit
   51  mkdir .ssh
   52  chmod 700 .ssh
   53  nano .ssh/authorized_keys
   54  ssh-add -K ~/.ssh/id_rsa
   55  cat /.ssh/id_rsa.pub
   56  ls
   57  mkdir .ssh
   58  pwd
   59  ls
   60  ls -la
   61  cd /.ssh
   62  cd .ssh
   63  ls
   64  cat /.ssh/id_rsa.pub
   65  eval `ssh-agent -s`
   66  exec ssh-agent bash
   67  eval ssh-agent -s
   68  ssh-add ~/.ssh/id_rsa
   69  sudo ssh-add ~/.ssh/id_rsa
   70  ssh-add ~/.ssh/id_rsa
   71  ssh-agent -c
   72  ssh-add ~/.ssh/id_rsa
   73  ssh-keygen -t rsa
   74  ssh-add ~/.ssh/id_rsa
   75  cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
   76  sudo chown $USER .ssh/authorized_keys
   77  mkdir ~/.ssh
   78  chmod 700 ~/.ssh
   79  touch ~/.ssh/authorized_keys
   80  chmod 700 ~/.ssh
   81  touch ~/.ssh/authorized_keys
   82  cd ..
   83  touch ~/.ssh/authorized_keys
   84  chmod 700 ~/.ssh
   85  touch ~/.ssh/authorized_keys
   86  sudo chown $USER .ssh/authorized_keys
   87  touch ~/.ssh/authorized_keys
   88  chmod 600 ~/.ssh/authorized_keys
   89  cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
   90  chmod 700 .ssh
   91  nano .ssh/authorized_keys
   92  cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys
   93  nano .ssh/authorized_keys
   94  ls
   95  ls -l
   96  ls -a
   97  cd .ssh
   98  ls
   99  cd ..
  100  chmod 700 .ssh
  101  sudo chmod 640 .ssh/authorized_keys
  102  sudo chown $USER .ssh
  103  sudo chown $USER .ssh/authorized_keys
  104  ssh-add ~/.ssh/id_rsa
  105  chmod 700 .ssh
  106  ls
  107  ls -a
  108  cd .ssh
  109  ls
  110  sudo chown $USER .ssh/authorized_keys
  111  touch ~/.ssh/authorized_keys
  112  sudo chown $USER .ssh/authorized_keys
  113  touch .ssh/authorized_keys
  114  touch /.ssh/authorized_keys
  115  touch ~/.ssh/authorized_keys
  116  ls
  117  cd authorized_keys
  118  ls
  119  clear
  120  cd ..
  121  ls
  122  cd
  123  ls
  124  ls -la
  125  ls .ssh/
  126  cat .ssh/authorized_keys
  127  exit
  128  clear
  129  exit
  130  mkdir .ssh
  131  chmod 700 .ssh
  132  nano .ssh/authorized_key
  133  pbcopy < ~/.ssh/id_rsa.pub
  134  nano .ssh/authorized_key
  135  pbcopy < ~/.ssh/id_rsa.pub
  136  ssh-copy-id -i ~/.ssh/mykey deploy@68.183.30.73
  137  nano .ssh/authorized_ke
  138  chmod 600 .ssh/authorized_keys
  139  clear
  140  exit
  141  sudo cp /root/.ssh/authorized_keys ./.ssh/authorized_keys
  142  sudo chown $USER .ssh/authorized_keys
  143  chmod 600 .ssh/authorized_keys
  144  exit
  145  bundle exec cap production deploy
  146  pwd
  147  ls -la
  148  clear
  149  nvm -v
  150  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
  151  setfattr -n user.pax.flags -v "mr" $NVM_DIR/nvm.sh
  152  nvm --version
  153  source ~/.bashrc
  154  nvm --version
  155  nvm use 14.4.0
  156  nvm install v14.4.0
  157  curl -o- http://gitlab.creditcloud.com/devops/nvm/raw/master/install.sh | bash
  158  touch /home/deployer/ReactAppDeploy/ReactAppDeploy/shared/.env
  159  cd /home/deploy/thatvisa/thatvisa
  160  cd shared/
  161  ls
  162  touch .env
  163  ls
  164  ls -a
  165  cd ..
  166  cd ../..
  167  ls
  168  pwd
  169  clear
  170  npm install -g yarn
  171  yarn -v
  172  sudo apt update
  173  sudo apt install nginx
  174  ls
  175  cd thatvisa/
  176  ls
  177  cd thatvisa/
  178  cd current
  179  ls
  180  cd ..
  181  ls
  182  cd thatvisa/
  183  clear
  184  cd current
  185  log/capistrano.log
  186  clear

  187  history
and (local)
477  pbcopy < ~/.ssh/id_ed25519.pub
  478  cat ~/.ssh/id_rsa.pub
  479  bundle exec cap production deploy
  480  touch /home/deploy/thatvisa/thatvisa/shared/.env
  481  touch /home/deploy/thatvisa/thatvisa/shared/.env
  482  sudo touch /home/deploy/thatvisa/thatvisa/shared/.env
  483  cd /home/deploy/thatvisa/thatvisa/shared/
  484  cd /home/deploy/thatvisa/thatvisa/
  485  bundle exec cap production deploy
  486  touch /home/deploy/thatvisa/thatvisa/shared/.env
  487  cd /home/deploy/thatvisa/thatvisa/
  488  bundle exec cap production deploy
  489  bundle exec cap production deploy
  490  sudo apt update
  491  bundle exec cap production deploy
  492  npm install gatsby
  493  log/capistrano.log
  494  chmod -755 log/capistrano.log
  495  log/capistrano.log
  496  clear
  497  npm install gatsby
  498  cd ../..
  499  cd Volumes/CustomDrive/
  500  cd thatvisa-frontend/

  501  bundle exec cap production deploy

Comments

Post a Comment

Popular posts from this blog

Github Tutorial

GitHub brings together the world's largest community of developers to discover, share, and build better software. Delivered through software as a service(SAAS) business model 2008 by linus (Owner: Microsoft)  #Create New Repository in Github New Repository Add Repository Name and description Public / Private, initialize this repo with Read Me Create repository create a new repository on the command line echo "#test" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/sinuna/test.git git push -u origin master …or push an existing repository from the command line git remote add origin https://github.com/sinuna/firstRepository.git git push -u origin master …or import code from another repository You can initialize this repository with code from a Subversion, Mercurial, or TFS project. Initialize Repo $ git init Clone Repo $ git clone https://github.com...
Post a Comment
Read more

Wordpress React Theme Development

1) Download wordpress file from https://wordpress.org/download/ 2) Open xampp, wamp or openserver. I will show with xampp server. Also Xampp server recommended too. 3) Add wordpress folder to htdocs folder (for xampp) 4) cd xampp\htdocs\wordpress\wp-content\themes 5) npx create-react-wptheme react_theme 6) cd react_theme/react-src 7) yarn start 8) go to wp-admin dashboard change worpdress theme to react_theme 9) again yarn start 10) yarn build App.js http://localhost/wordpress_react/?rest_route=/wp/v2/posts import React , { Component } from 'react' ; class App extends Component { constructor ( props ){ super ( props ); this . state = { data : [] } } componentDidMount () { return fetch ( `http://localhost/wordpress_react/?rest_route=/wp/v2/posts` ) . then (( response ) => response . json ()) . then (( responseJson ) => { this . setState ({ data : ...
Post a Comment
Read more