Repository files navigation

This walkthrough is for auto-deploying a React application to a Digital Ocean droplet.

1. Create the new DNS entry in the Networking tab on Digital Ocean. Point it to the droplet you are configuring.
2. SSH into your server in a new terminal.
3. sudo apt install nginx git curl wget

1. Create.github/workflows/main.yml file in your project directory.
2. Paste the following text.

   # This is a basic workflow to help you get started with Actionsname:Continuous Deploy# Controls when the workflow will runon:# Triggers the workflow on push or pull request events but only for the main branchpush:branches:[ main ]pull_request:branches:[ main ]# Allows you to run this workflow manually from the Actions tabworkflow_dispatch:# A workflow run is made up of one or more jobs that can run sequentially or in paralleljobs:# This workflow contains a single job called "build"build:# The type of runner that the job will run onruns-on:self-hosted# Steps represent a sequence of tasks that will be executed as part of the jobsteps:# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it    -uses:actions/checkout@v2# Runs a set of commands using the runners shell    -name:Run a multi-line scriptrun:|npm installnpm run build --if-present

3. Commit and push that to Github.
4. Go to the Settings tab of your Github repo.
5. Go to Actions tab on left.
6. Click on Runners in the new General nav item that appears.
7. Click button to create new self-hosted runner.
8. Click the Linux radio button.
9. Follow the steps and accept all the defaults when asked.
10. When you get to# Last step, run it!, do not run the command listed. Instead of executing./run.sh, you will executesudo ./svc.sh install.
11. Then executesudo ./svc.sh start

Now your droplet will be the runner for building your application.

1. Go to your project directory and make some trivial change.
2. Commit and push change to Github.
3. You can watch the process by clicking on the Actions tab on Github and watch your app be built for production.
4. Once the Action is complete, go back to the terminal where you are in your droplet.
5. cd ./_work/{project name}/{project name}
6. Stay in this directory. You'll need to runpwd later.
7. Runls and you'll see your project. It will also have abuild directory since your Action rannpm run build.

1. cd /etc/nginx/sites-available
2. sudo vim react-app
3. Go back to the other terminal where you are in the directory that the Github Action created for you.
4. Runpwd and copy the path.
5. Put the following text into thereact-app file. Replace everthing inside{} with the appropriate value.

   server {    server_name {your DNS entry - e.g. app.domain.com};    root {paste what you copied in the previous step}/build;    index index.html index.htm;    location / {        try_files $uri $uri/ /index.html$is_args$args;    }    access_log /var/log/nginx/client.log;}

6. Save and exit.
7. sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/react-app
8. sudo systemctl daemon-reload
9. sudo service nginx reload