Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(doc):Add guide to Deploy Gatsby to DigitalOcean droplet. #24652

Merged
merged 25 commits into from
Jul 21, 2020
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
8fcadf5
Added doc for deploying to digitalocean droplet
mistryvatsal May 30, 2020
0719d24
Updated with deploying to digitalocean droplet doc
mistryvatsal May 30, 2020
ae5f680
Added missing code language flag to fix lint check
mistryvatsal May 30, 2020
2c861e1
Updated grammar and styles as per code review
mistryvatsal Jun 2, 2020
71c6c35
Removed the line for brevity
mistryvatsal Jun 2, 2020
f8db030
Updated grammar change for line #11 as per code review
mistryvatsal Jun 2, 2020
9229f7d
Ran prettier to format the code
mistryvatsal Jun 2, 2020
c19c237
Added step to install dependencies after cloning
mistryvatsal Jun 2, 2020
2867e71
Change case of node to Node as per suggestion.
mistryvatsal Jul 4, 2020
1e5b7aa
Changing optional to required for installing version of Node
mistryvatsal Jul 4, 2020
5a8b787
Adding suggested changes for better understanding.
mistryvatsal Jul 4, 2020
81669d6
Adding the suggested changes.
mistryvatsal Jul 4, 2020
d0477fa
Making changes as per suggestion by moderator
mistryvatsal Jul 4, 2020
788d42b
Making changes as per suggestion
mistryvatsal Jul 4, 2020
ed4178d
Making changes as per the suggestion
mistryvatsal Jul 4, 2020
d213d4a
Update docs/docs/deploying-to-digitalocean-droplet.md
mistryvatsal Jul 4, 2020
6c3bd8f
Making changes as per the suggestion
mistryvatsal Jul 4, 2020
a150446
Adding changes as per the suggestion
mistryvatsal Jul 4, 2020
463f41b
Making changes as per the suggestion
mistryvatsal Jul 4, 2020
135f281
Added snippet to get rid of permission denied
mistryvatsal Jul 4, 2020
67220f6
Adding indentation as per linting rules
mistryvatsal Jul 4, 2020
4cb6cc9
Ran prettier
mistryvatsal Jul 4, 2020
2fb05d6
Updating grammar as per suggested
mistryvatsal Jul 21, 2020
b5ebacc
Added note to copy local repo path for future ref
mistryvatsal Jul 21, 2020
e911332
Ran prettier to format the code
mistryvatsal Jul 21, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 238 additions & 0 deletions docs/docs/deploying-to-digitalocean-droplet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
---
title: Deploying to a DigitalOcean Droplet
---

This guide walks through how to deploy and host your Gatsby site on a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/).
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

DigitalOcean provides a cloud platform to deploy, manage, and scale applications of any size, removing infrastructure friction and providing predictability so developers and their teams can spend more time building better software.

DigitalOcean's product droplets are scalable compute IaaS (Infrastructure as a Service) or a VPS (Virtual Private Server) on the cloud which has great reliability and scalability. They come with varied price ranges ideal for small apps to giant enterprise-level apps.

They provide service to select from various Unix-based distributions and select your technology-based platform with preinstalled pre-requisites from the marketplace. This guide will walk through the specific options that work best for deploying a Gatsby site with DigitalOcean.

A Droplet can be spun up in less than a minute for as little as \$5/month.

## Prerequisites

- A Gatsby site living in a Git repository (GitHub, GitLab, or any Git cloud)
- A [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) with a non-root user configured with sudo group ([example: Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-create-a-new-sudo-enabled-user-on-ubuntu-18-04-quickstart))
- A custom domain name for your Gatsby site to help with configuring HTTPS

## How to deploy your Gatsby site to DigitalOcean

### Install NodeJS, NPM and Gatsby-CLI onto your droplet

Follow these instructions for installs on an Ubuntu droplet.

1. Log in to your droplet as a non-root user.

2. Install NodeJS

```bash
sudo apt-get update
sudo apt-get install nodejs
```

3. Install npm

```bash
sudo apt-get install npm
```

To view the version of node and npm installed, run,
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

```bash
node -v
npm -v
```

4. To install the latest stable release using the `n` package (Optional) (Recommended),
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

```bash
sudo npm install -g n
sudo n stable
```

`Note`: If you check the version now, you would see the older versions of node and npm from the cache.
You can either exit and restart your terminal or refresh the cache by following commands,

```bash
hash node
hash npm
```

5. Install the gatsby-cli now globally. This will be useful ahead in building the Gatsby site for production.

```bash
sudo npm install -g gatsby-cli
```

### Clone your repository to the droplet

The next step is to clone the repository containing your Gatsby app (Replace `<your-github-repo-site>` with your Github repository link)

```bash
git clone <your-github-repo-site>
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved
```

> Note: this guide will refer to the cloned directory as `<my-gatsby-app>` for simplicity.
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

### Build your gatsby site to generate a static site for production
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

The static files will be hosted publicly on the droplet. The `gatsby build` command provides utility to build the site and generate the static files in the `/public`.

1. Install dependencies.

```bash
cd my-gatsby-app
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved
sudo npm install
```

2. Run build to generate static files.

```bash
sudo gatsby build
```

### Install Nginx Web Server to host the static site and open firewall to accept HTTP and HTTPS requests
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

To host a website or static files onto a Linux-based server/VPS, a web-server like Apache or Nginx is required.

Nginx is web-server. It provides the infrastructure code for handling client requests from the World Wide Web, along with features like a load balancer, mail proxy, and HTTP Cache.

1. Install Nginx.

```bash
sudo apt-get install nginx
```

2. Configure firewall settings of the droplet to listen to HTTP and HTTPS requests on port 80 and 443 respectively.

```bash
sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'
```

3. To check the access,

```bash
sudo ufw app list
```

4. If `ufw` status is disabled/inactive, you can enable it with the following command:

```bash
sudo ufw enable
```

Allow the OpenSSH if not already done, to not disconnect from your droplet.

```bash
sudo ufw allow 'OpenSSH'
```

### Configuring Nginx to point to your Gatsby site's `/public` directory and add your domain
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

Change the root directory configuration of Nginx in the default server block file

1. Go to `/etc/nginx/sites-available/`

```bash
cd /etc/nginx/sites-available/
```

2. Open the file default
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

```bash
sudo vim default
```

3. Edit the file and make the following changes for below-mentioned fields, leave the rest of the fields as is.
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

```bash
server {
root <path to my-gatsby-app>/public;

index index.html index.htm index.nginx-debian.html;

server_name <your-domain-name>;

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

4. Restart the Nginx service

```bash
sudo systemctl restart nginx
```
mistryvatsal marked this conversation as resolved.
Show resolved Hide resolved

5. Configure your domain to point to the IP address of your droplet. Go to the Advanced DNS settings in your domain provider's console and put an A record that points to the IP address of the droplet.

6. By this time, you can view your site live at `<your-domain>`.

### Configuring HTTPS for your Gatsby Site

Follow the below steps to configure your site with a free SSL/TLS certificate from Lets Encrypt using their Certbot CLI tool.

1. Install Certbot onto your droplet.

You'll need to add the Certbot PPA (Personal Package Archives) to your list of repositories. To do so, run the following commands:

```bash
sudo apt-get update
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
```

Run the following commands to install Certbot.

```bash
sudo apt-get install certbot python3-certbot-nginx
```

2. Generate the certificate. Certbot will automatically edit and configure the Nginx config file and point to the certificate file.

Run the following command:

```bash
sudo certbot --nginx
```

3. If you are using Certbot for the first time on this droplet then you will be prompted to enter your e-mail for recovery purposes.

4. Agree to the license agreement on prompt.

`Note`: You will be prompted to select the domain for which you want to generate the certificate. Select the domain configured in a [previous step](#configuring-nginx-to-point-to-your-gatsby-site's-`public`-directory-and-add-your-domain).

`Note`: You will be prompted to choose the option to redirect HTTP requests to HTTPS, which you may choose on your needs.
(It is recommended to choose to redirect HTTP to HTTPS)

5. Restart the nginx service.

```bash
sudo systemctl restart nginx
```

6. Now, you can access your site at `<your-domain>` with a secure connection.

### View your Gatsby site live

Once you've followed along with all the steps and configuration properly, you can visit your site live at `<your-domain>`.

Whenever there's an update to your site, run a `sudo gatsby build` in the root of your `<my-gatsby-app>` and your changes will be live.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems quite cumbersome to have to log back in to run a manual build. Is there a more automated way of picking up changes that we could recommend?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could achieve CI or automated builds with the use of Github Actions and Git hooks? But don't you think it would make this guide more of a tutorial? We could keep the guide pretty raw and basic, we can obviously make a tutorial on building CI for this deployment option and link it to this guide. What are your views?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey there. I think at least mentioning it would be useful–even a link to an offsite resource for automating builds. I don't think that would tip a guide toward a tutorial, as this is already pretty sequential even with standalone headings as opposed to "steps". But we could get this one merged and open that as a separate issue, perhaps.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, I have searched for some good off-site resources, but I don't find any good resource to add as a link in this doc. Those resources are not exact to what we need. I think adding them, would mislead people. Instead, I'm planning to write a micro-tutorial on building automated CI for Gatsby and Digitalocean on some off-site platform which we can add as a link to this doc later on. Or else, as you suggested we can open this as a separate issue to write a tutorial. Let me know what do you think.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think opening a separate issue to follow this PR is a good idea, that way we can track it!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Perfect! 😃


Congratulations! You've deployed your Gatsby App on a DigitalOcean droplet along with configuring HTTPS for it.

## Additional resources

There's a lot more to learn about DigitalOcean's Droplets, Ubuntu configurations, and Nginx. Below are some links which could be useful in achieving the prerequisites of this post:

- [Microblog - Create a new non-root user with sudo privileges on Ubuntu-based DigitalOcean Droplet configured with SSH](https://dev.to/mistryvatsal/microblog-create-a-new-non-root-user-with-sudo-privileges-on-ubuntu-based-digitalocean-droplet-configured-with-ssh-1l3)
- [Official DigitalOcean Docs](https://www.digitalocean.com/docs/)
- [Official Nginx Docs](http://nginx.org/en/docs/)
- [Configuring HTTPS Servers with Nginx](http://nginx.org/en/docs/http/configuring_https_servers.html)
- [How To Install Nginx on Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04)
- [How To Secure Nginx with Let's Encrypt on Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04)
3 changes: 3 additions & 0 deletions www/src/data/sidebars/doc-links.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@
- title: Deploying to AWS Amplify
link: /docs/deploying-to-aws-amplify/
breadcrumbTitle: AWS Amplify
- title: Deploying to a DigitalOcean Droplet
link: /docs/deploying-to-digitalocean-droplet/
breadcrumbTitle: DigitalOcean
- title: Deploying to S3 & CloudFront
link: /docs/deploying-to-s3-cloudfront/
breadcrumbTitle: S3 & CloudFront
Expand Down