diff --git a/guides/render/README.md b/guides/render/README.md index 1067bdb90c877..d14c2ae3215a3 100644 --- a/guides/render/README.md +++ b/guides/render/README.md @@ -3,7 +3,8 @@ ## Prerequisites To complete this guide, you need: -* a [Render](https://render.com/) account + +- a [Render](https://render.com/) account ## Setup @@ -27,69 +28,58 @@ When the deployment is complete, you will see your server listed in the 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 Apply. - -## 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 YAML from the side navigation and click the New From YAML 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 Apply 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 Services 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.