Skip to content

Latest commit

 

History

History
389 lines (319 loc) · 18.7 KB

DEPLOYMENT.md

File metadata and controls

389 lines (319 loc) · 18.7 KB
Raw

Deployment Steps

Click here to return to the main README file

Contents

Basic Requirements

  • An IDE, such as GitPod or VSCode
  • Git, for version control
  • GitHub account
  • Python3
  • pip, for Python package installation
  • Heroku account
  • AWS S3 account
  • Stripe account
  • Email account
  • Render account
  • ElephantSQL account

Back to the top

Environment Variables

GitPod IDE

Key Value
SECRET_KEY ## YOUR SECRET_KEY ##
DATABASE_URL ## YOUR DATABASE_URL ##
STRIPE_PUBLIC_KEY ## YOUR STRIPE_PUBLIC_KEY ##
STRIPE_SECRET_KEY ## YOUR STRIPE_SECRET_KEY ##
STRIPE_WH_SECRET ## YOUR STRIPE_WH_SECRET ##
EMAIL_HOST_USER ## YOUR EMAIL ADDRESS ##
EMAIL_HOST_PASS ## YOUR EMAIL APP PASS CODE ##
AWS_SECRET_ACCESS_KEY ## YOUR AWS_SECRET_ACCESS_KEY ##
AWS_ACCESS_KEY_ID ## YOUR AWS_ACCESS_KEY_ID ##
SONGKICK_API_KEY ## YOUR SONGKICK_API_KEY ##
USE_AWS True

Non-GitPod IDE

import os

os.environ["SECRET_KEY"] = "## YOUR SECRET_KEY ##"
os.environ["DATABASE_URL"] = "## YOUR DATABASE_URL ##"
os.environ["STRIPE_PUBLIC_KEY"] = "## YOUR STRIPE_PUBLIC_KEY ##"
os.environ["STRIPE_SECRET_KEY"] = "## YOUR STRIPE_SECRET_KEY ##"
os.environ["STRIPE_WH_SECRET"] = "## YOUR STRIPE_WH_SECRET ##"
os.environ["EMAIL_HOST_USER"] = "## YOUR EMAIL ADDRESS ##"
os.environ["EMAIL_HOST_PASS"] = "## YOUR EMAIL APP PASS CODE ##"
os.environ["AWS_SECRET_ACCESS_KEY"] = "## YOUR AWS_SECRET_ACCESS_KEY ##"
os.environ["AWS_ACCESS_KEY_ID"] = "## YOUR AWS_ACCESS_KEY_ID ##"
os.environ["SONGKICK_API_KEY"] = "## YOUR SONGKICK_API_KEY ##"
os.environ["USE_AWS"] = True
os.environ["DEVELOPMENT"] = True

Key-value Pairs

To find the values of each key:

  • SECRET_KEY: This is a custom string set up to keep sessions secure. I recommend using a 'Fork Knox' level password generated by RandomKeygen.
  • DATABASE_URL: This is temporary.
  • STRIPE_PUBLIC_KEY: On the Stripe Dashboard in the Developer's API section - Publishable key.
  • STRIPE_SECRET_KEY: On the Stripe Dashboard in the Developer's API section - Secret key.
  • STRIPE_WH_SECRET: In the Developer's Webhooks section after creating an endpoint for your webhook - Signing secret.
  • EMAIL_HOST_USER: Your email address or username. See below for instructions.
  • EMAIL_HOST_PASS: Your passcode from your email client. See below for instructions.
  • AWS_SECRET_ACCESS_KEY: From the CSV file that you download having created a User in Amazon AWS S3. See below for instructions.
  • AWS_ACCESS_KEY_ID: From the CSV file that you download having created a User in Amazon AWS S3. See below for instructions.
  • SONGKICK_API_KEY: Apply for a Songkick API key here.

Back to the top

Initial Deployment

This site was deployed to Heroku by following these steps:

  1. Heroku needs to be told what the requirements are for this project, so go into your GitPod terminal, and create files to explain the requirements by using the following commands:
    • pip3 freeze --local > requirements.txt
    • echo web: python run.py > Procfile - Ensure there is no blank line after the contents of this file.
  2. Push these changes to your repository.
  3. Login or sign up to Heroku.
  4. Select 'Create New App' in the top right of your dashboard.
  5. Choose a unique app name, and select the region closest to you, before clicking 'Create App'.
  6. Go to the 'Deploy' tab, find 'Deployment Method', and select 'GitHub'.
  7. Search to find your GitHub repository, and click 'Connect'. Don't enable automatic deployment yet, as this can cause errors.
  8. Go to the 'Settings' tab, find 'Config Vars', and click 'Reveal Config Vars'.
  9. Enter key-value pairs that match those in your project files, as shown above in Environment Variables.
  10. In Heroku, go to the 'Resources' tab, and add on 'Heroku Postgres' with the free plan.
  11. Make migrations to start using PostgreSQL by running python3 manage.py makemigrations then python3 manage.py migrate.
  12. If it returns django.db.utils.OperationalError: FATAL: role "xxxxxxxx" does not exist, then run unset PGHOSTADDR in your terminal and run the commands in step 11 again.
  13. Load the category and product fixtures by running python3 manage.py loaddata categories, then python3 manage.py loaddata products.
  14. Create a superuser to access the Django admin panel by running python3 manage.py createsuperuser then following the instructions in the terminal.
  15. Remove the DATABASE_URL from your environment variables or env.py file.
  16. Install the Heroku CLI and log in using either heroku login or heroku login -i.
  17. Run heroku config:set DISABLE_COLLECTSTATIC=1 --app ms4-lead-shot-hazard.
  18. Run git add ., git commit -m "Your commit message here", git push.
  19. Add the hostname of your Heroku app to 'ALLOWED HOSTS' in your settings.py file. This can be found in Heroku Settings > App Name.
  20. Connect Heroku to Git using git remote add heroku {your heroku git url}.
  21. If you'd like to automatically deploy to Heroku whenever you push to GitHub, do the following:
    • Go to the 'Deploy' tab in Heroku, and click 'Enable Automatic Deployment'.
    • In 'Manual Deploy', choose which branch you'd like to deploy from (I chose 'main' branch, this is sometimes 'master').
    • Click 'Deploy Branch' to deploy your app onto the Heroku servers.
    • Once the app has finished building, click 'Open App' to open your site.
  22. If you don't want to automatically deploy to Heroku, do the following:
    • Enter git push -u heroku main or git push -u heroku master.
  23. Your app will now be running at https://{your-app-name}.herokuapp.com/

Back to the top

Migration to Render

This site was migrated to Render by following these steps:

  1. Go to your ElephantSQL Dashboard and click 'Create New Instance'.
  2. Name the plan the same as the project.
  3. Select the Tiny Turtle (free) plan.
  4. Click 'Select Region', and choose the data center nearest to your location.
  5. Click 'Review'.
  6. Check the details are correct, and click 'Create instance'.
  7. Return to your Dashboard and click on the name of this database instance.
  8. Go to the Postgres Migrationn Tool repo.
  9. Open it, either via Gitpod, or by cloning the repo and opening it in your terminnal.
  10. Run the following script python3 reel2reel.py.
  11. Go to your Heroku 'Settings' tab and click the 'Reveal Config Vars' button.
  12. Copy the value of the 'DATABASE_URL' config var (it starts with postgres://).
  13. Return to your terminal, and enter that string in where prompted.
  14. Go to your new ElephantSQL database.
  15. Copy the value of the 'URL' config var (it also starts with postgres://).
  16. Return to your terminal, and enter that string in where prompted.
  17. When the script finishes, your database should have been moved from Heroku to ElephantSQL.
  18. To check this, select 'BROWSER' in ElephantSQL.
  19. Click 'Table queries' and you should see entries. This confirms that the database migration has worked.
  20. In your repo, add a build.sh file at the root, including the following code: 
    set -o errexit
pip install -r requirements.txt
python manage.py collectstatic --noinput
python manage.py makemigrations && python manage.py migrate
  21. In your settings.py, add the following below the declaration of your 'ALLOWED_HOSTS' variable: 
    # Add Render.com URL to allowed hosts
RENDER_EXTERNAL_HOSTNAME = os.environ.get('RENDER_EXTERNAL_HOSTNAME')
if RENDER_EXTERNAL_HOSTNAME:
    ALLOWED_HOSTS.append(RENDER_EXTERNAL_HOSTNAME)
  22. Delete the Procfile.
  23. Add, commit and push your changes to GitHub.
  24. Login or sign up to Render.
  25. Select 'New' in the top right of your dashboard, and select 'Web Service'.
  26. Search for your repo, and click 'Connect'.
  27. Enter a unique name for your web service (ideally the project name).
  28. Use the following settings: | Setting Name | Value | | --- | --- | | Root Directory | {blank} | | Environment | Python 3 | | Region | Frankfurt (EU Central)| | Branch | main |
  29. Set the 'Build Command' to ./build.sh.
  30. Set the 'Start Command' to gunicorn <PROJECT_NAME>.wsgi:application, replacing <PROJECT_NAME> with the directory name of your project (not the repo name, the name of the folder inside your repo that's similar to your repo name).
  31. Select the 'Free plan $0/month'.
  32. Click 'Advanced', then 'Add Secret File'.
  33. Click 'Advanced', and 'Add Environment Variable'.
  34. Enter a key of WEB_CONCURRENCY and a value of 4.
  35. Copy and paste the content of your env.py file into the 'File Contents' section.
  36. Remove any gitpod-specific environment variables, like DEV or DEPLOYMENT.
  37. Check your Heroku variables to ensure you have all environment variables included that you may need, as some of these may not be stored in your env.py, such as your STRIPE keys.
  38. Set the 'Filename' to env.py, and click 'Save'.
  39. Select whether you want the repo to auto-deploy or not.
  40. Click 'Create web service'.
  41. Wait for this to deploy.
  42. Your app will now be running at https://{your-app-name}.onrender.com/.
  43. Log in to Stripe.
  44. Go to 'Developers -> Webooks -> Add endpoint'.
  45. Paste in your new deployed URL, and add /checkout/wh/ to the end of it.

Back to the top

Amazon AWS

S3 Bucket

  1. Create a new bucket, give it a name, and choose the region closest to you.
  2. Go to 'Properties', turn on static website hosting, and fill in index.html and error.html where it suggests.
  3. Go to 'Permissions', and add the code block underneath this section into your CORS config to link Heroku and your S3 bucket.
  4. Still in 'Permissions', go to 'Bucket Policy', 'Edit', 'Policy Generator'.
  5. In 'Select Type of Policy' choose 'S3 Bucket Policy'.
  6. In 'Add Statements', select 'Effect' of Allow, enter * into 'Principal', in 'Actions' choose GetObject, enter your ARN from your main S3 Bucket page, and click 'Add Statement'.
  7. Then click 'Generate', and copy and paste your generated policy into the Bucket Policy area.
  8. Add /* at the end of the 'Resource' line, and save.
  9. Still in 'Permissions', go to the 'Access Control List', and select List next to 'Everyone'.
  [
    {
      "AllowedHeaders": [
        "Authorization"
      ],
      "AllowedMethods": [
        "GET"
      ],
      "AllowedOrigins": [
        "*"
      ],
      "ExposeHeaders": []
    }
  ]

IAM

  1. Go to 'User Groups', 'Create New Group', enter a sensible name (I chose manage-ms4-lead-shot-hazard), and click 'Create'.
  2. Go to 'Policies', 'Create New Policy', 'JSON', 'Import Managed Policy', 'S3', 'AmazonS3FullAccess', 'Import'.
  3. Get your ARN from 'S3 Permissions', delete the * from 'Resource', and add the code block underneath this section into the area.
  4. Click 'Next', 'Review', provide a name and description, and click 'Create Policy'.
  5. Go to 'User Groups', 'Find New Group', 'Permissions', 'Add Permissions', 'Attach Policies', find the policy you created in steps 3 and 4, and click 'Add Permissions'.
  6. Go to 'Users', provide a name, and tick the checkbox beside 'Access key - Programmatic access'.
  7. Click 'Next', select the group you created in step 1, and click through to the end.
  8. Finally, click 'Create User', and download the CSV file, which will contain your AWS_SECRET_ACCESS_KEY and your AWS_ACCESS_KEY_ID. This is the only time that this CSV file will be available, so it's very important to download it at this stage.
"Resource": [
    "{YOUR ARN}",
    "{YOUR ARN}/*"
]

Final AWS Steps

  1. Remove the DISABLE_COLLECTSTATIC variable from your environment variables.
  2. When you next deploy to Heroku, AWS will retrieve your static files and store them.
  3. Go to S3, you'll see that you have a 'static' folder with all your static files in it.
  4. Create a 'media' file in your S3 Bucket, click 'Upload'.
  5. Click 'Add Files', then select all your product images.
  6. Under 'Manage Public Permissions', select 'Grant Public Read Access'.
  7. Then click through until you can click 'Upload'.
  8. Finally, attempt to log in to the site using the superuser details, then access the 'admin' panel on the live site, go to 'Email Addresses', and select Primary and Verified on the superuser email address.

Back to the top

How to Fork it

  1. Login or Sign Up to GitHub.
  2. On GitHub, go to Abibubble/ms4-lead-shot-hazard.
  3. In the top right, click 'Fork'.
  4. Store your environment variables
    • GitPod
      • Go to GitPod Workspaces.
      • Click 'Settings'.
      • Store your variables in the 'Variables' section, as shown above in Environment Variables.
    • Another IDE
      • Create an env.py file in the root directory of the project.
      • Enter your variables, as shown above in Environment Variables.
  5. You will also need to install all of the project requirements. This can be done using the command pip3 install -r requirements.txt.
  6. Type python3 manage.py runserver in your GitPod terminal to run your local site of this project.

Back to the top

Making a Local Clone

  1. Clone from GitHub
    • Log in to GitHub and locate the Repository for this site.
    • Under the repository name, above the list of files, click 'Code'.
    • Here you can either Clone or Download the repository.
    • Open Git Bash.
    • Change the current working directory to the new location, where you want the cloned directory to be.
    • Type git clone, and then paste the URL that was copied in Step 4.
    • Press Enter, and your local clone will be created.
    • Run git remote rm origin in your terminal to remove the link to this repo.
  2. Install Python's required packages
    • You will need to install all of the project requirements, using the command pip3 install -r requirements.txt.
  3. Store environment variables
    • GitPod
      • Go to GitPod Workspaces.
      • Click 'Settings'.
      • Store your variables in the 'Variables' section, as shown above in Environment Variables.
    • Another IDE
      • Create an env.py file in the root directory of the project.
      • Enter your variables, as shown above in Environment Variables.
  4. Migrate database models
    • Run python3 manage.py makemigrations.
    • Run python3 manage.py migrate.
  5. Load data
    • These must be run in this order, as the products need the categories to populate correctly.
    • Run python3 manage.py loaddata categories.
    • Run python3 manage.py loaddata products.
  6. Create a Superuser
    • A superuser is required to access the Django admin panel.
    • Run python3 manage.py createsuperuser.
    • Follow the instructions in the terminal.
  7. Run the project locally
    • Type python3 manage.py runserver in your IDE terminal to run your local site of this project.

For a more detailed version of these steps, go to the Github Docs page on this topic.

Back to the top

Email Setup

Before beginning these steps, go to settings.py and change the DEFAULT_FROM_EMAIL to your own email address.

Gmail

  1. Go to your Gmail, and enter the 'Settings' tab.
  2. Go to 'Accounts and Imports', 'Other Google Account Settings'.
  3. Go to the 'Security' tab, and scroll down to 'Signing in to Google'.
  4. Click on '2-step Verification', click 'Get Started', and enter your Gmail password.
  5. Verify using your preferred method, and then turn on 2-step verification.
  6. Go back to 'Security', 'Signing in to Google', then go to 'App Passwords'.
  7. Enter your password again if prompted, then set 'App' to Mail, 'Device' to Other, and type in Django.
  8. Copy and paste the passcode that shows up, this is your 'EMAIL_HOST_PASS' variable.

Outlook

  • In settings.py change EMAIL_HOST to smtp.office365.com.
  • For EMAIL_HOST_USER, please enter your Outlook username.
  • For EMAIL_HOST_PASS, please enter your Outlook password.

Back to the top

Google Signup

To set this up, I followed this tutorial on YouTube by JustDjango. The basic steps are below.

  1. Go to Google Console, go to 'APIs', then 'Credentials' and set up credentials for your Google app.
  2. You want to create a new 'OAuth 2.0 Client ID'.
  3. Give it a relevant name for your project.
  4. Under 'Authorised JavaScript origins', enter your localhost domain, and your live site domain, with no / at the end.
  5. Under 'Authorised redirect URIs', enter the same domains as above, and add /accounts/google/login/callback/ to the end of them.
  6. Click 'Save'.
  7. Go into this newly created 'Client ID', and to the right, you'll see your Client ID number and your Client Secret.
  8. Go to your site's admin console, login, click on 'Social Applications', and click 'Add Social Application'.
  9. From the dropdown, select the provider of 'Google'.
  10. Give it a relevant name for your project, and add in your Client ID and Client Secret from step 7.
  11. Highlight your chosen site from 'Available Sites', move it into 'Chosen Sites', and click 'Save'.

Back to the top