From 1b255baffc9e9b47b9c8209f7d8232bed4ecc4e0 Mon Sep 17 00:00:00 2001 From: Jackson Romero Date: Wed, 7 Feb 2024 21:41:48 -0500 Subject: [PATCH 1/4] Have DB_PORT use the DB_PORT from the env --- server/config/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/config/config.js b/server/config/config.js index f68d934..46ed00a 100644 --- a/server/config/config.js +++ b/server/config/config.js @@ -1,5 +1,5 @@ require('dotenv').config() - + module.exports = { GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET, @@ -8,7 +8,7 @@ module.exports = { DB_HOST: process.env.POSTGRESQL_DB_HOST, DB_USER: process.env.POSTGRESQL_DB_USER, DB_PASSWORD: process.env.POSTGRESQL_DB_PASSWORD, - DB_PORT: 5432, + DB_PORT: process.env.DB_PORT, DB_DIALECT: 'postgres', PROTOCOL: process.env.PROTOCOL, DOMAIN: process.env.DOMAIN, From 27a748cb529a44485ae98bbb6498ad881baf7798 Mon Sep 17 00:00:00 2001 From: Jackson Romero Date: Wed, 7 Feb 2024 21:40:17 -0500 Subject: [PATCH 2/4] Create deployment steps! --- DEPLOYMENT.md | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 2 + 2 files changed, 160 insertions(+) create mode 100644 DEPLOYMENT.md diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..eae6a0f --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,158 @@ +# Deployment +**Contact:** Please reach out to Jackson Romero ( or ) for help with deployment or development on q' + +## Set-by-step instructions for deploying q' onto a new system (tested on Ubuntu 22.04) + +### Postgres + 1. Install postgresql, `sudo apt install postgresql` +2. Switch to postgres user, `sudo -i -u postgres` +3. Create a new user, `createuser --interactive` (I called mine `ohq` and will continue to use that as an example) +4. Create a database with the same name, `createdb ohq` +5. Logout of the postgres user, `^D` +6. Add new Linux user with the same name, `sudo adduser ohq` +7. Login to that user to connect to the database, `sudo -u ohq psql` +8. You can verify your connection by running `\conninfo` + +--- + +### NGINX +1. Install NGINX, `sudo apt install nginx` +2. Start NGINX, `sudo systemctl start nginx` +3. Edit the file at `/etc/nginx/sites-enabled/default` to be the following + +``` +upstream ohq { + server localhost:4000; +} + +upstream api { + server localhost:8000; +} + +server { + server_name ; + listen 80; + + return 301 https://$host$request_uri; +} + +server { + server_name ; + + listen 443 ssl; # managed by Certbot + listen [::]:443 ssl ipv6only=on; + + # RSA certificate + ssl_certificate /etc/letsencrypt/live//fullchain.pem; # managed by Certbot + ssl_certificate_key /etc/letsencrypt/live//privkey.pem; # managed by Certbot + + include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot + + # Redirect non-https traffic to https + if ($scheme != "https") { + return 301 https://$host$request_uri; + } # managed by Certbot + + location /ohq/ { + rewrite /ohq/(.*) /$1 break; + proxy_pass http://ohq/; + } + + location /api { + rewrite /api/(.*) /$1 break; + proxy_pass http://api; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + proxy_set_header Host $host; + } +} +``` +Be sure to replace , e.g. "cs122.andrew.cmu.edu www.cs122.andrew.cmu.edu" and replace with the folder path we'll create in a few steps, e.g. "cs122.andrew.cmu.edu" + +4. Install certbot, `sudo snap install --classic certbot` and then `sudo ln -s /snap/bin/certbot /usr/bin/certbot` +5. Use certbot to generate SSL certificates. **THIS MAY REQUIRE DIFFERENT STEPS DEPENDING ON HOW AND WHERE YOUR DOMAIN IS HOSTED.** You will have to research this on your own. Ideally, your certificates will be created at `/etc/letsencrypt/live//fullchain.pem` and `/etc/letsencrypt/live//privkey.pem`, but if they're created in different places, you will have to modify these lines of the nginx config. +6. You can validate your nginx config with `sudo nginx -t` +7. Start nginx with `sudo systemctl start nginx` +8. Depending on your domain hosting provider, there may be built-in ways to do this. However, if manually configuring your website, you should be able to add a .A record to your domain and going to it should show a 502 error page from nginx! + +--- + +### OAuth +1. Using the Google Cloud console, create a project and search for OAuth +2. Under "OAuth Consent Screen", select "External" as the User Type and hit "Create". +3. Follow the instructions and add your primary domain under "Authorized Domains" (e.g. for cs122.andrew.cmu.edu this domain would be cmu.edu) +4. On the next page, add the ".../auth/userinfo.email", ".../auth/userinfo.profile", and "openid" scopes +5. Publish the app to remove testing/development limitations on the number and kinds of users you can have +6. Under "Credentials", create an OAuth Client ID +7. Select "Web Application" as the type. +8. For "Authorized JavaScript origins", add the following + - Your primary URL, e.g. "https://cs122.andrew.cmu.edu" + - "http://localhost:3000" + - "http://localhost:8000" + - Your primary URL with port 443, e.g. "https://cs122.andrew.cmu.edu:443" +9. For "Authorized redirect URIs", add the following + - Your primary URL with /login/callback, e.g. "https://cs122.andrew.cmu.edu/login/callback" + - Your primary URL with /login/, e.g. "https://cs122.andrew.cmu.edu/login" + - "http://localhost:3000/login/callback" + - "http://localhost:8000/login/callback" + - Your primary URL with a /, e.g. "https://cs122.andrew.cmu.edu/" + - Your primary URL, e.g. "https://cs122.andrew.cmu.edu" + - Your primary URL with port 443, e.g. "https://cs122.andrew.cmu.edu:443" + +* Are all of these necessary? Quite frankly I don't know but 122 has all of these and our queue works so just to be safe I listed them all + +--- + +### q' +1. Clone this repo +2. Install Node.js 16+ for your system. This can be done via various package managers and their site (definitely works on Node 18.19 and 16.18) +3. In both the /client and /server folders, run `npm install` +4. Setup the client and server .env files as follows: + +#### Client .env +``` +WDS_SOCKET_PORT=0 + +REACT_APP_PROTOCOL=https +REACT_APP_DOMAIN= +REACT_APP_GOOGLE_CLIENT_ID= +REACT_APP_SOCKET_PATH=/api/socket.io +REACT_APP_SERVER_PATH=/api + +PUBLIC_URL=/ohq +``` +#### Server .env +``` +PROTOCOL=https +DOMAIN= +CLIENT_PORT=443 + +GOOGLE_CLIENT_ID= +GOOGLE_CLIENT_SECRET= +GOOGLE_REDIRECT_URI=https:// + +POSTGRESQL_DB_HOST=localhost +POSTGRESQL_DB_USER= +POSTGRESQL_DB_PASSWORD= +POSTGRESQL_DB= +POSTGRESQL_DB_PORT=5432 + +TOKEN_KEY= +OWNER_EMAIL= +``` + +6. Deploy the server +``` + % cd server + % npm run db:sync # Only on first time running or after database modification + % npm install -g nodemon + % npm start +``` +7. Deploy the client +``` + % cd client + % npm run build + % sudo npm install --global serve + % serve -s build -l 4000 -n +``` diff --git a/README.md b/README.md index a535f20..8aa8bda 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ **The Squad (Spring '23):** Pranav Addepalli, Angela Zhang, Amanda Li, Jackson Romero, Arthur Jakobsson, Mihir Khare, Sherry Wang +**Post S23 Contributors** Jackson Romero, Alex Blass + ## Getting Started 1. Download and install [Node.js](https://nodejs.org/en/) 2. Install Node modules within both `client` and `server` folders. `cd` into each and run: From 75294f5b402fec39945cdc4aff203eda3b2604fd Mon Sep 17 00:00:00 2001 From: Jackson Romero Date: Wed, 7 Feb 2024 21:41:15 -0500 Subject: [PATCH 3/4] add certificate warning --- DEPLOYMENT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md index eae6a0f..e7a3343 100644 --- a/DEPLOYMENT.md +++ b/DEPLOYMENT.md @@ -71,7 +71,7 @@ server { Be sure to replace , e.g. "cs122.andrew.cmu.edu www.cs122.andrew.cmu.edu" and replace with the folder path we'll create in a few steps, e.g. "cs122.andrew.cmu.edu" 4. Install certbot, `sudo snap install --classic certbot` and then `sudo ln -s /snap/bin/certbot /usr/bin/certbot` -5. Use certbot to generate SSL certificates. **THIS MAY REQUIRE DIFFERENT STEPS DEPENDING ON HOW AND WHERE YOUR DOMAIN IS HOSTED.** You will have to research this on your own. Ideally, your certificates will be created at `/etc/letsencrypt/live//fullchain.pem` and `/etc/letsencrypt/live//privkey.pem`, but if they're created in different places, you will have to modify these lines of the nginx config. +5. Use certbot to generate SSL certificates. **THIS MAY REQUIRE DIFFERENT STEPS DEPENDING ON HOW AND WHERE YOUR DOMAIN IS HOSTED.** You will have to research this on your own. Ideally, your certificates will be created at `/etc/letsencrypt/live//fullchain.pem` and `/etc/letsencrypt/live//privkey.pem`, but if they're created in different places, you will have to modify these lines of the nginx config. **BE AWARE THAT YOU MAY HAVE TO SETUP CERTIFICATE ROTATION** 6. You can validate your nginx config with `sudo nginx -t` 7. Start nginx with `sudo systemctl start nginx` 8. Depending on your domain hosting provider, there may be built-in ways to do this. However, if manually configuring your website, you should be able to add a .A record to your domain and going to it should show a 502 error page from nginx! From 67cc046b99fbfda6b76d2a7b0743d9cd38cc0c82 Mon Sep 17 00:00:00 2001 From: Jackson Romero Date: Wed, 7 Feb 2024 21:50:08 -0500 Subject: [PATCH 4/4] Add github actions explanation --- DEPLOYMENT.md | 1 + 1 file changed, 1 insertion(+) diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md index e7a3343..7ea1821 100644 --- a/DEPLOYMENT.md +++ b/DEPLOYMENT.md @@ -156,3 +156,4 @@ OWNER_EMAIL= % sudo npm install --global serve % serve -s build -l 4000 -n ``` +8. We have GitHub actions set up now to automatically push new queue updates. This isn't required to deploy the queue and is **optional**, but it's a nice to have. We use tmux to manage the client and server sessions. If you aren't doing this, I'd recommend **deleting the .github folder**.