First time deploy TaskMuncher React App to Digital Ocean
by John Vincent
Posted on May 12, 2018
This is part of a series of discussions regarding Deploying to a Digital Ocean Droplet.
For more details, please see Deploy TaskMuncher
Deploy TaskMuncher
This is an involved and varied process.
Before deployment
On Mac, remove quarantine from all files going to the website.
cd /Users/jv/Desktop/MyDevelopment/github/....
Look for files with com.apple.quarantine
xattr -r -l taskmuncher-client | grep -i com.apple.quarantine
xattr -r -l taskmuncher-server | grep -i com.apple.quarantine
To remove quarantine:
xattr -r -d com.apple.quarantine taskmuncher-client
xattr -r -d com.apple.quarantine taskmuncher-server
Create .env
files
Create application .env
files in
cd websites-config/taskmuncher-config/taskmuncher/save-env
Recommended to use:
client.env
for React applicationsserver.env
for Node applications
Copy your .env
settings to these files.
Create Deployment Script
cd websites-config/taskmuncher-config/taskmuncher/bin
Create script deploy-apps
#!/bin/sh
#
# script to get, build and deploy apps to nginx
#
# setup ssh to github
#
echo "setup ssh to github"
eval "$(ssh-agent)"
ssh-add -k ~/.ssh/id_github
#
cd
cd tmp
#
echo "Removing Logfile"
rm /home/jv/tmp/logfile.txt
#
CLONES_DIR="/home/jv/clones"
DOCROOT_DIR="/var/www/taskmuncher/html"
SERVER_ROOT_DIR="/var/www/taskmuncher/server"
SAVE_ENV_DIR="/home/jv/save-env"
#
echo "Creating $DOCROOT_DIR"
sudo mkdir -p $DOCROOT_DIR
echo "Setting permissions on $DOCROOT_DIR"
sudo chown -R jv:jv $DOCROOT_DIR
sudo chmod 0755 $DOCROOT_DIR
#
echo "Creating $SERVER_ROOT_DIR"
sudo mkdir -p $SERVER_ROOT_DIR
echo "Setting permissions on $SERVER_ROOT_DIR"
sudo chown -R jv:jv $SERVER_ROOT_DIR
sudo chmod 0755 $SERVER_ROOT_DIR
#
echo "Removing clones directory"
rm -rf $CLONES_DIR
#
echo "Creating clones directory"
mkdir $CLONES_DIR
cd $CLONES_DIR
#
echo "Git clone desired repositories"
git clone git@github.com:<yourid>/taskmuncher-client $CLONES_DIR/client
git clone git@github.com:<yourid>/taskmuncher-server $CLONES_DIR/server
#
# copy .env file
#
echo "Copy .env file to cloned client directory"
cp -r $SAVE_ENV_DIR/client.env $CLONES_DIR/client/.env
#
# work in the client clones directory
#
echo "Move to the cloned client directory"
cd $CLONES_DIR/client
#
# install node modules
#
echo "Install node modules"
npm install
#
# run production build
#
echo "Run production build"
npm run production
#
# copy .env file
#
echo "Copy .env file to cloned server directory"
cp -r $SAVE_ENV_DIR/server.env $CLONES_DIR/server/.env
#
# work in the server clones directory
#
echo "Move to the cloned server directory"
cd $CLONES_DIR/server
#
# install node modules
#
echo "Install node modules"
npm install
#
# Delete files in nginx docroot
#
echo "Delete files in Nginx Docroot $DOCROOT_DIR"
rm -rf $DOCROOT_DIR/*
#
# Delete files in nginx server-root
#
echo "Delete files in Nginx server root $SERVER_ROOT_DIR"
rm -rf $SERVER_ROOT_DIR/*
#
# Copy client files to nginx
#
echo "Copy client files to $DOCROOT_DIR"
cp -r $CLONES_DIR/client/dist/* $DOCROOT_DIR
#
# set permissions
#
echo "Setting permissions on $DOCROOT_DIR"
sudo chown -R jv:jv $DOCROOT_DIR
find $DOCROOT_DIR -type d -print0 | xargs -0 chmod 0755 # For directories
find $DOCROOT_DIR -type f -print0 | xargs -0 chmod 0644 # For files
#
# Copy server files to nginx
#
echo "Copy server files to Nginx $SERVER_ROOT_DIR"
cp -r $CLONES_DIR/server/* $SERVER_ROOT_DIR
cp -r $CLONES_DIR/server/.env $SERVER_ROOT_DIR
#
# set permissions
#
echo "Setting permissions on $SERVER_ROOT_DIR"
sudo chown -R jv:jv $SERVER_ROOT_DIR
find $SERVER_ROOT_DIR -type d -print0 | xargs -0 chmod 0755 # For directories
find $SERVER_ROOT_DIR -type f -print0 | xargs -0 chmod 0644 # For files
#
echo "Handle PM2"
cd $SERVER_ROOT_DIR
handle-pm2
#
echo "Restarting Nginx"
sudo nginx -t
sudo systemctl restart nginx
#
echo "Mongo Status"
sudo systemctl status mongodb
#
echo "Completed"
Ensure
chmod 744 deploy-apps
Create PM2 script
cd websites-config/taskmuncher-config/taskmuncher/bin
Create file handle-pm2
#!/bin/bash
#
# script to add task to pm2 if not already added, or to restart
# the task if it has already been added.
#
echo "Current PM2 status"
pm2 list
#
echo "Check status of task"
pm2 describe server > /dev/null
RUNNING=$?
if [ "${RUNNING}" -ne 0 ]; then
echo "Adding task to PM2"
cd /var/www/taskmuncher/server
pm2 start server.js
else
echo "Restarting task"
pm2 restart server
fi;
#
echo "Show current pm2 status"
pm2 list
echo "Restarting PM2"
pm2 restart all
Ensure
chmod 744 handle-pm2
Create Nginx Restart Script
cd websites-config/taskmuncher-config/taskmuncher/bin
Create file nginx-restart
#!/bin/bash
#
# script to restart nginx
#
echo "Restarting Nginx"
sudo nginx -t
sudo systemctl restart nginx
Ensure
chmod 744 nginx-restart
Create Mongo Status Script
cd websites-config/taskmuncher-config/taskmuncher/bin
Create file 'mongo-status'
#!/bin/bash
#
# script to show mongo status
#
echo "Mongo Status"
sudo systemctl status mongodb
Ensure
chmod 744 mongo-status
Create First Deployment script
cd websites-config/taskmuncher-config/taskmuncher
Create file 'first-deploy'
#!/bin/sh
#
# script to setup the user environment
#
# setup ssh to github
#
echo "setup ssh to github"
eval "$(ssh-agent)"
ssh-add -k ~/.ssh/id_github
#
CLONES_DIR="/home/jv/clones"
SITE_DIR=$CLONES_DIR/mac/websites-config/taskmuncher-config/taskmuncher
#
echo "Clean"
rm -rf bin clones cronjobs save-env tmp
#
echo "Make directories"
mkdir -p bin
mkdir -p clones
mkdir -p cronjobs
mkdir -p save-env
mkdir -p tmp
#
echo "Git clone repo_shell_scripts to $CLONES_DIR"
git clone git@github.com:<your id>/<your repo> $CLONES_DIR
#
echo "Copy .profile"
cp -r $SITE_DIR/.profile ~/.profile
#
echo "Copy README.md"
cp -r $SITE_DIR/README.md ~/README.md
#
echo "Copy .vimrc"
cp -r $SITE_DIR/.vimrc ~/.vimrc
#
echo "Copy bin directory"
cp -r $SITE_DIR/bin ~
#
echo "Copy save-env directory"
cp -r $SITE_DIR/save-env ~
echo "Delete $CLONES_DIR"
# rm -rf $CLONES_DIR
echo "Completed"
Ensure
chmod 744 first-deploy
Execute First Deployment
Copy first-deploy to the root of your droplet user.
Login to your droplet
ssh-to-taskmuncher
and execute the script
./first-deploy
Perform Deployment
Login to your droplet
ssh-to-taskmuncher
and execute the script
./deploy-apps
Other Tasks
There are usually other tasks that need to be performed.
Mongo
May need to run mongo scripts, for example
cd /var/www/taskmuncher/server/scripts
mongo localhost:27017/taskmuncher all-data.js
Check database
cd /var/www/taskmuncher/server/scripts
mongo localhost:27017/taskmuncher list-data.js
Cron Job
May need a cron job, for example
crontab -e
0 * * * * /home/jv/cronjobs/update-feeds
crontab -l
PM2
May need to have PM2 start a task. If so, it will look like this
cd /var/www/myapp/html
pm2 start server.js
React
- Basic React
- Basic React Patterns
- Basic React Redux
- Basic React Redux App
- Basic React Testing with Jest and Enzyme
- Building and deploying MyTunes to johnvincent.io
- Building and deploying React Github Helper App to johnvincent.io
- Deploy React App to Heroku using Travis Continuous Integration
- Deploy TaskMuncher React App to AWS
- First time deploy TaskMuncher React App to Digital Ocean
- Gatsby and Client Only Components
- Gatsby Getting Started
- Gatsby React Icons
- Mac Visual Studio Code
- Material-UI
- Material-UI Pickers
- Material-UI Styling
- Optimizing TaskMuncher with Webpack 4
- Overview of React Gomoku
- Overview of React Hangman
- Overview of React Lights Out
- Overview of React Yahtzee
- React Material-UI
- React Production Issues
- React PropTypes
- React/Redux Node/Express Ecosystem
- Redux Dev Tools
- Responsive Material-UI
- Styling Material-UI components using Styled-Components
- TaskMuncher Performance
- Transforming Html with Webpack
- Update TaskMuncher for Lighthouse Findings
- Update TaskMuncher to be a Progressive Web App
- Update TaskMuncher to use React BrowserRouter
- Update TaskMuncher to Webpack v4, Babel v7, Material-UI v3
- Upgrading Babel and ESLint to use React Advanced Language Features
- Webpack Bundle Analyzer
Taskmuncher
- Backup TaskMuncher from Digital Ocean
- Configure HTTP Nginx
- Configure HTTPS Nginx
- Configuring Google Domains
- Configuring Meta Tags
- Create Site Map
- Create SSL Certificates
- Create Ubuntu Droplet at Digital Ocean
- Deploy TaskMuncher React App to AWS
- Facebook Application Id
- First time deploy TaskMuncher React App to Digital Ocean
- Google Analytics for TaskMuncher
- Google Authentication
- Google Gmail Configuration
- Google Webmaster Tools
- Install Ubuntu Mongo
- Install Ubuntu Nginx
- Mailgun
- Maintaining Ubuntu Droplet
- Material-UI Showcase
- Optimizing TaskMuncher with Webpack 4
- React Production Issues
- TaskMuncher Images and Favicons
- TaskMuncher Overview
- TaskMuncher Performance
- TaskMuncher Website Validation
- Update SSL Certificates
- Update TaskMuncher for Lighthouse Findings
- Update TaskMuncher to be a Progressive Web App
- Update TaskMuncher to use React BrowserRouter
- Update TaskMuncher to Webpack v4, Babel v7, Material-UI v3