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

Simplify guide to leverage single render.yaml #159

Open
wants to merge 1 commit into
base: docs
Choose a base branch
from
Open
Changes from all commits
Commits
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
62 changes: 26 additions & 36 deletions guides/render/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
## Prerequisites

To complete this guide, you need:
* a [Render](https://render.com/) account

- a [Render](https://render.com/) account

## Setup

Expand All @@ -27,69 +28,58 @@ When the deployment is complete, you will see your server listed in the <kbd>Ser

Delete the service in your dashboard.


---


# Deploy Secure OpenVSCode Server to Render with OAuth

## Prerequisites

To complete this guide, you need:
* a [Render](https://render.com/) account
* an account with the [OAuth Provider](https://oauth2-proxy.github.io/oauth2-proxy/docs/configuration/oauth_provider) of your choice.

## Set up provider account

Consult the [OAuth2-Proxy Provider Configuration Documentation](https://oauth2-proxy.github.io/oauth2-proxy/docs/configuration/oauth_provider/), and select at least one provider to use for authenticating users of Open VSCode. Create an OAuth application with your provider of choice. For the Homepage/Base URI, enter a placeholder like `https://openvscode-secure-server.onrender.com`, and for the Callback/Redirect URI, enter a placeholder like `https://openvscode-secure-server.onrender.com/oauth2/callback`. You will update the OAuth2 app with your URIs once your OAuth2-Proxy Server deployment is complete. Save the Client Secret and ID in a secure place like a password manager for later reference.

- a [Render](https://render.com/) account
- an account with the [OAuth Provider](https://oauth2-proxy.github.io/oauth2-proxy/docs/configuration/oauth_provider) of your choice.

## Set up Open VSCode Server

To deploy Open VSCode to Render as a private service, click the following button and follow the instructions:

[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/render-examples/openvscode-private-server)

After that, create a name for the service group (for example `Private OpenVSCode Server`) and click <kbd>Apply</kbd>.

## Start the server
## Set up OAuth application with provider

Render starts the server automatically. Copy the service address to the clipboard:
![Image showing where the service address can be found](https://user-images.githubusercontent.com/36797588/135016293-fb9b351b-f764-4c22-a1a3-7bfdec386f50.jpeg)


## Set up OAuth2-Proxy server
Consult the [OAuth2-Proxy Provider Configuration Documentation](https://oauth2-proxy.github.io/oauth2-proxy/docs/configuration/oauth_provider/), and select at least one provider to use for authenticating users of Open VSCode. Create an OAuth application with your provider of choice. For the Homepage/Base URI, enter a placeholder like `https://openvscode-secure-server.onrender.com`, and for the Callback/Redirect URI, enter a placeholder like `https://openvscode-secure-server.onrender.com/oauth2/callback`. You will update the OAuth2 app with your URIs once your OAuth2-Proxy Server deployment is complete. Save the Client Secret and ID in a secure place like a password manager for later reference.

Fork the [OAuth2-Proxy Render Example Repository](https://github.com/dnilasor/oauth2-proxy). In the Render Dashboard, select <kbd>YAML</kbd> from the side navigation and click the <kbd>New From YAML</kbd> button:
![Image showing where to initialize a new service from YAML](https://user-images.githubusercontent.com/36797588/135017966-06eb2d3a-1255-42df-800d-38413b8180d8.jpeg)
## Set up Open VSCode and OAuth Servers

After that, use your connected GitHub account or the full URL of your public OAuth-Proxy fork to create a deployment based on the fork.
To deploy Open VSCode to Render as a private service that's publicly accessible with authentication, click the following button and follow the instructions:

## Configure OAuth server
[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/render-examples/openvscode-with-oauth)

Create a name for the service group (for example, `Secure Access To Open VSCode`). Next, enter the environment variable values to configure OAuth.
You will create a name for the service group (for example `Secure OpenVSCode Server`). After that, enter the environment variable values to configure your OAuth provider:

- For `OAUTH2_PROXY_UPSTREAMS` enter the Service Address for Private Open VSCode Server appended by http://
- For `OAUTH2_PROXY_CLIENT_ID` enter the Client ID from your OAuth App
- For `OAUTH2_PROXY_CLIENT_SECRET` enter the Client Secret from your OAuth App or password manager
- For `OAUTH2_PROXY_PROVIDER` enter the name of your OAuth provider
![Image showing YAML service creation and input of sync: false values](https://user-images.githubusercontent.com/36797588/135025049-fd399efb-3c17-4a12-9539-0d12e4306eeb.jpeg)

Click <kbd>Apply</kbd> to create the services.

## Start the server

Render starts the server automatically.
Render starts both servers automatically in sequence. Monitor progress from the service creation page:
![Image showing where to access the authentication server](https://user-images.githubusercontent.com/36797588/135170007-814862c9-7d93-42ed-9112-74427066300c.jpeg)

## Access OpenVSCode Server
When the deployment is complete, click the link to your `oauth2-proxy` web service.

When the deployment is complete, you will see your OAuth server listed in the <kbd>Services</kbd> section of the Dashboard. Click the dashboard entry to see your server URL to access OpenVSCode Server. You will be prompted to authenticate and then redirected to the private Open VSCode service.
## Locate your OAuth server address

## Teardown
In the dashboard entry for your `oauth2-proxy` web service, locate and copy your authentication server URL:
![Image showing where to find the authentication server URL](https://user-images.githubusercontent.com/36797588/135170659-c84ed169-72c1-4ed3-a8c7-c685b547bba3.jpeg)

Delete the service in your dashboard.
## Update OAuth application with provider

Return to the OAuth application that you set up in an earlier step. Update the homepage/base URI and the callback/redirect URI using the address copied from the `oauth2-proxy` web service and save your changes.

![Image showing which URL fields to update in the Google OAuth Application](https://user-images.githubusercontent.com/36797588/135171263-47f78f3b-2a34-4ae7-a718-5f69250edc8b.jpeg)

## Access OpenVSCode Server

In the dashboard entry for your `oauth2-proxy` web service, click the server URL to access OpenVSCode Server. You will be prompted to authenticate and then redirected to the private Open VSCode service.
![Image showing the authentication screen](https://user-images.githubusercontent.com/36797588/135171787-0434bf26-838c-47a0-9990-0af66a9651f3.jpeg)

## Teardown

Delete the services in your dashboard.