From bcea2e2eac2c323ed6e067ccec2147e9e678531b Mon Sep 17 00:00:00 2001 From: Tom Ross Date: Tue, 12 Oct 2021 11:44:39 +0100 Subject: [PATCH] Standalone dev server: Use HTTPS (#25900) --- client/web/README.md | 18 ++++---- client/web/dev/server/development.server.ts | 23 ++++++++--- client/web/dev/server/production.server.ts | 10 +++-- client/web/dev/utils/environment-config.ts | 6 ++- doc/dev/background-information/web/web_app.md | 6 +-- sg.config.yaml | 41 +++++++++++-------- 6 files changed, 65 insertions(+), 39 deletions(-) diff --git a/client/web/README.md b/client/web/README.md index ac866e507e3..92bc7b7204d 100644 --- a/client/web/README.md +++ b/client/web/README.md @@ -4,6 +4,8 @@ Use `sg` CLI tool to configure and start local development server. For more information checkout `sg` [README](../../dev/sg/README.md). +Our local development server runs by starting both a [Caddy](https://caddyserver.com/) HTTPS server and a Node HTTP server. We then can reverse proxy requests to the Node server to serve client assets under HTTPS. + ### Configuration Environment variables important for the web server: @@ -16,28 +18,30 @@ It's possible to overwrite these variables by creating `sg.config.overwrite.yaml ### Development server ```sh -sg run web-standalone +sg start web-standalone ``` -For enterprise version: +For open-source version: ```sh -sg run enterprise-web-standalone +sg start oss-web-standalone ``` ### Production server ```sh -sg run web-standalone-prod +sg start web-standalone-prod ``` -For enterprise version: +For open-source version: ```sh -sg run enterprise-web-standalone-prod +sg start oss-web-standalone-prod ``` -Web app should be available at `http://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}` (note the `http` not `https`). Build artifacts will be served from `/ui/assets`. +Web app should be available at `https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}`. Build artifacts will be served from `/ui/assets`. + +Note: If you are unable to use the above commands (e.g. you can't install Caddy), you can use `sg run web-standalone` instead. This will start a development server using only Node, and will be available at `http://localhost:${CLIENT_PROXY_DEVELOPMENT_PORT}`. ### API proxy diff --git a/client/web/dev/server/development.server.ts b/client/web/dev/server/development.server.ts index 885716447b6..4290c5ec01c 100644 --- a/client/web/dev/server/development.server.ts +++ b/client/web/dev/server/development.server.ts @@ -17,7 +17,8 @@ import { shouldCompressResponse, STATIC_ASSETS_PATH, STATIC_ASSETS_URL, - WEB_SERVER_URL, + HTTPS_WEB_SERVER_URL, + HTTP_WEB_SERVER_URL, PROXY_ROUTES, } from '../utils' import { getHTMLPage } from '../webpack/get-html-webpack-plugins' @@ -25,7 +26,12 @@ import { getHTMLPage } from '../webpack/get-html-webpack-plugins' // TODO: migrate webpack.config.js to TS to use `import` in this file. // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports const webpackConfig = require('../../webpack.config') as Configuration -const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTPS_PORT, IS_HOT_RELOAD_ENABLED } = environmentConfig +const { + SOURCEGRAPH_API_URL, + SOURCEGRAPH_HTTPS_PORT, + CLIENT_PROXY_DEVELOPMENT_PORT, + IS_HOT_RELOAD_ENABLED, +} = environmentConfig interface DevelopmentServerInit { proxyRoutes: string[] @@ -81,14 +87,18 @@ async function startWebpackDevelopmentServer({ liveReload: false, allowedHosts: 'all', hot: IS_HOT_RELOAD_ENABLED, - // TODO: resolve https://github.com/webpack/webpack-dev-server/issues/2313 and enable HTTPS. - https: false, historyApiFallback: { disableDotRule: true, }, - port: SOURCEGRAPH_HTTPS_PORT, + port: CLIENT_PROXY_DEVELOPMENT_PORT, client: { overlay: false, + webSocketTransport: 'ws', + logging: 'verbose', + webSocketURL: { + port: SOURCEGRAPH_HTTPS_PORT, + protocol: 'wss', + }, }, static: { directory: STATIC_ASSETS_PATH, @@ -115,7 +125,8 @@ async function startWebpackDevelopmentServer({ ) await server.start() - signale.success(`Development server is ready at ${chalk.blue.bold(WEB_SERVER_URL)}`) + signale.info(`Development HTTP server is ready at ${chalk.blue.bold(HTTP_WEB_SERVER_URL)}`) + signale.success(`Development HTTPS server is ready at ${chalk.blue.bold(HTTPS_WEB_SERVER_URL)}`) signale.await('Waiting for Webpack to compile assets') } diff --git a/client/web/dev/server/production.server.ts b/client/web/dev/server/production.server.ts index 201bc1ef286..9f6eb8c24aa 100644 --- a/client/web/dev/server/production.server.ts +++ b/client/web/dev/server/production.server.ts @@ -13,11 +13,12 @@ import { getCSRFTokenAndCookie, STATIC_ASSETS_PATH, STATIC_INDEX_PATH, - WEB_SERVER_URL, + HTTP_WEB_SERVER_URL, + HTTPS_WEB_SERVER_URL, shouldCompressResponse, } from '../utils' -const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTPS_PORT } = environmentConfig +const { SOURCEGRAPH_API_URL, CLIENT_PROXY_DEVELOPMENT_PORT } = environmentConfig async function startProductionServer(): Promise { if (!SOURCEGRAPH_API_URL) { @@ -55,8 +56,9 @@ async function startProductionServer(): Promise { // Redirect remaining routes to index.html app.get('/*', (_request, response) => response.sendFile(STATIC_INDEX_PATH)) - app.listen(SOURCEGRAPH_HTTPS_PORT, () => { - signale.success(`Production server is ready at ${chalk.blue.bold(WEB_SERVER_URL)}`) + app.listen(CLIENT_PROXY_DEVELOPMENT_PORT, () => { + signale.info(`Production HTTP server is ready at ${chalk.blue.bold(HTTP_WEB_SERVER_URL)}`) + signale.success(`Production HTTPS server is ready at ${chalk.blue.bold(HTTPS_WEB_SERVER_URL)}`) }) } diff --git a/client/web/dev/utils/environment-config.ts b/client/web/dev/utils/environment-config.ts index 31ac7b945ae..15a718b5366 100644 --- a/client/web/dev/utils/environment-config.ts +++ b/client/web/dev/utils/environment-config.ts @@ -9,6 +9,7 @@ export const environmentConfig = { SOURCEGRAPH_API_URL: process.env.SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTPS_DOMAIN: process.env.SOURCEGRAPH_HTTPS_DOMAIN || 'sourcegraph.test', SOURCEGRAPH_HTTPS_PORT: Number(process.env.SOURCEGRAPH_HTTPS_PORT) || 3443, + CLIENT_PROXY_DEVELOPMENT_PORT: Number(process.env.CLIENT_PROXY_DEVELOPMENT_PORT) || 3080, WEBPACK_SERVE_INDEX: process.env.WEBPACK_SERVE_INDEX === 'true', SITE_CONFIG_PATH: process.env.SITE_CONFIG_PATH || DEFAULT_SITE_CONFIG_PATH, ENTERPRISE: Boolean(process.env.ENTERPRISE), @@ -22,6 +23,7 @@ export const environmentConfig = { IS_HOT_RELOAD_ENABLED: process.env.NO_HOT !== 'true', } -const { SOURCEGRAPH_HTTPS_PORT, SOURCEGRAPH_HTTPS_DOMAIN } = environmentConfig +const { SOURCEGRAPH_HTTPS_PORT, SOURCEGRAPH_HTTPS_DOMAIN, CLIENT_PROXY_DEVELOPMENT_PORT } = environmentConfig -export const WEB_SERVER_URL = `http://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}` +export const HTTPS_WEB_SERVER_URL = `https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}` +export const HTTP_WEB_SERVER_URL = `http://localhost:${CLIENT_PROXY_DEVELOPMENT_PORT}` diff --git a/doc/dev/background-information/web/web_app.md b/doc/dev/background-information/web/web_app.md index d7e9a5290f6..2276a8c2c2b 100644 --- a/doc/dev/background-information/web/web_app.md +++ b/doc/dev/background-information/web/web_app.md @@ -19,13 +19,13 @@ To install it, [see the instructions](../../getting-started/quickstart_3_install 1. Start the web server and point it to any deployed API instance. See more info in the web app [README](https://github.com/sourcegraph/sourcegraph/blob/main/client/web/README.md). ```sh - sg run web-standalone + sg start web-standalone ``` - For the enterprise version: + For the open-source version: ```sh - sg run enterprise-web-standalone + sg start oss-web-standalone ``` 2. Start all backend services with the frontend server. diff --git a/sg.config.yaml b/sg.config.yaml index 18c2a2359a2..f24487d01e2 100644 --- a/sg.config.yaml +++ b/sg.config.yaml @@ -333,14 +333,6 @@ commands: WEBPACK_SERVE_INDEX: true SOURCEGRAPH_API_URL: https://k8s.sgdev.org - enterprise-web-standalone: - cmd: yarn workspace @sourcegraph/web serve:dev - install: yarn --no-progress - env: - ENTERPRISE: 1 - WEBPACK_SERVE_INDEX: true - SOURCEGRAPH_API_URL: https://k8s.sgdev.org - web-standalone-prod: cmd: yarn workspace @sourcegraph/web serve:prod install: yarn workspace @sourcegraph/web run build @@ -349,15 +341,6 @@ commands: WEBPACK_SERVE_INDEX: true SOURCEGRAPH_API_URL: https://k8s.sgdev.org - enterprise-web-standalone-prod: - cmd: yarn workspace @sourcegraph/web serve:prod - install: yarn workspace @sourcegraph/web run build - env: - ENTERPRISE: 1 - NODE_ENV: production - WEBPACK_SERVE_INDEX: true - SOURCEGRAPH_API_URL: https://k8s.sgdev.org - docsite: cmd: .bin/docsite_${DOCSITE_VERSION} -config doc/docsite.json serve -http=localhost:5080 install: | @@ -913,6 +896,30 @@ commandsets: - enterprise-web - caddy + web-standalone: + commands: + - web-standalone + - caddy + env: + ENTERPRISE: 1 + + oss-web-standalone: + commands: + - web-standalone + - caddy + + web-standalone-prod: + commands: + - web-standalone-prod + - caddy + env: + ENTERPRISE: 1 + + oss-web-standalone-prod: + commands: + - web-standalone-prod + - caddy + tests: # These can be run with `sg test [name]` backend: