/ INSIGHT

OMGDeploy Build Process - Part 0: Production Environment

Setup and Configure the Server's Production Environment.

Featured image for OMGDeploy Build Process - Part 0: Production Environment

Before we can begin Production, we need to setup the Environment. There are two Asana checklist tasks for this. This page will break down each individual sub task

Create Production Environment

This is a pretty simple task, but it requires access to WHM and probably goDaddy

  1. We need a domain, either one from the client or a development domain. We've been buying .xyz domains to use as dev domains lately ($0.99 for the first year on GoDaddy).
    1. Whatever the domain, the A record needs to be pointed to 50.28.78.188
    2. If using a dev domain, turn off auto-renew in GoDaddy
    3. Give it a bit of time to propogate before testing
  2. In WHM, Create a New Account
    1. Domain - Use what is projected to be the live domain here, not the dev domain
    2. Username - Create a simple username for this account, usually lowercase initials of the domain
    3. Password & Re-type - Use the Password Generator, make sure it's 100/100, you do not need to copy it at this point
    4. Email - godaddy@omahamediagroup.com
    5. Choose a Package - choose "Unlimited" (make sure the 'U' is capitalized)
    6. DNS Settings - make sure 'Enable DKIM on this account', 'Enable SPF on this account', and 'Use the nameservers specified...' are checked
    7. Mail Routing Settings - select 'Remote Mail Exchanger
    8. Click the 'Create' button and wait for it to create the account
  3. In the Create New Account log screen, copy the New Account Info down to the PassWord and paste it into the project details in Asana
    1. Add the dev domain underneath the domain, if necessary
  4. If using a dev domain, click 'Go to cPanel'
    1. Click on 'Addon Domains'
    2. Enter the dev domain as the New Domain Name
    3. Subdomain can be whatever
    4. Document Root should just be /public_html/ in most cases
    5. Add a subdomain to the dev domain and point it to the dev folder, this will be used after we launch the site
    6. Click 'Add Domain'
  5. Test the domain, if working you should see a white screen with the index and probably just a cgi-bin folder. If it doesn't work, give it a bit more time
  6. Setup Git Repo
    1. In cPanel, open 'Git Version Control'
    2. Click Create
      1. Turn off 'Clone a Repository'
      2. Repository Path: 'public_html'
      3. Repository Name: Enter the name of the site or company
      4. Click 'Create'
    3. A .git folder will be created in the 'public_html' folder, you can now manage it with terminal
      1. See below
cd public_html
git config --global user.email "support@omahamediagroup.com"
git config --global user.name "OMG Support"
git add --all
git commit -m "Initial commit"

Configure Production Environment Create Database|

  • In cPanel, click into MySQL Databases
  • Create a New Database
    • The prefix is usually forced and is the account username
    • In most cases, you would just add 'ee' to the Database Name
    • Click 'Create Database' when ready
  • Next, Add a New User
    • Generally, the Username will be the same as the DB Name, 'ee'
    • For Password, use the Password Generato
    • Click 'Create User'
  • Finally, Add User To Database
    • Choose the User and Database and click 'Add'
    • Check 'All Priveleges' and click 'Make Changes'

|Log DB Details in Asana|

  • Copy the Password, and paste it into the project settings at the bottom, along with the DB/Username
    • ex: "| username_ee | ,fVrWTcW{OA["

|Import OMGDeploy|

  • On omgdeploy.com cpanel:
    • Make a ZIP file of the current OMGDeploy Environment and download it (Delete from server after it's downloaded)
    • Export an SQL file dump of the current OMGDeploy database
  • Back on the new environment cpanel:
    • In cPanel, click into File Manager, Upload (to root) and extract the deploy ZIP file. Delete when done.
    • While you're here, in the File Manager, click 'Settings' in the top right and check the following boxes:
      • Web Root
      • Show Hidden Files
      • Disable Character Encoding Verification Dialogs
    • In cPanel, go into phpMyAdmin, click on the new database
      • Click 'Import' at the top
      • Click File to Import field and select the SQL file
      • Click 'Go' and let it import

|Change Database Login in Config|

  • Edit /omgcp/user/config/config.php
  • Locate the database settings similar to the example above
    • Make sure hostmane is 'localhost'
    • Change database to your database name, ex: username_ee
    • Change username to the username you setup, ex: username_ee
    • Enter the password you generated
  • Click Save Changes

|Cycle Encryption Keys|

  1. Use 'terminal' to generate new encryption tokens
    1. Paste in the command above
    2. replace, in config.php, both 'encryption_key' and 'session_crypt_key'

|Set Site Name|

  • Login to /omgcp
  • Click Settings
  • Change Name under General Settings to the name of the site
  • Click Save Settings
  • Now would be a great time to login to http://latest.omgdeploy.com/omgcp and make sure the site name didn't change there. This ensures that you are connected to the correct database.

|Setup /temp/stage, Import coded design|

  • Download a copy of the build ZIP file, either from HTMLBurger or Drive
  • Upload it to the '/temp' folder using File Manager
  • Extract it into '/temp/stage' folder
  • Generally, we make a few quick changes to the extracted files
    • Copy all files from the 'build' folder into '/temp/stage/' folder for convenience
    • If there is a 'home.html' or 'index.html', rename it 'homepage.html'
      • This allows us to access a directory listing of build files through a browser

|Configure OMG Keymaster|

OMG Keymaster requires an API Key and Username from OMG Gatekeeper

  • Login to https://gatekeeper.omgdeploy.com/omgcp/
    • Click on the 'Gatekeeper' button at the top
    • Click 'New API Key' on the left
    • Enter Site URL
      • Use the planned live URL, not the dev domain url
      • Ex: websitedomain.com
    • Click 'Generate Key'
    • Copy the new Key
  • Back in the new site's EE Control Panel
    • Goto Developer -> Addons -> OMG Keymaster
    • Paste the Site Domain (websitedomain.com)
    • Paste the API Key
    • Click Save Settings

|Configure ReCaptcha Plugin for Forms and FreeForm|

  • Visit https://www.google.com/recaptcha/admin#list
    • You'll want to be logged into the omahamediagroup@gmail.com Google account
      • Alternatively, you can create the key and then transfer it to omahamediagroup@gmail.com
    • Create a New Key Set
      • Enter a Label, generally the name of the site
      • reCAPTCHA v2 - "I'm not a robot"
      • Add your domain and dev demain (if applicable)
      • Accept Terms of Service
      • Deselect 'Send alerts to owners'
      • Click 'Submit'
      • You should get Site Key and Secret Key
  • Back in the new site's EE CP
    • ReCAPTCHA v2 Plugin
      • Goto Developers -> Addons -> reCAPTCHA v2
      • Paste in the new Site Key and Secret Key
      • Click 'Save Settings'
    • FreeForm
      • Click the 'FreeForm' button at the top of the screen
      • Click 'reCAPTCHA' on the left under 'Settings'
      • Paste in the new Site Key and Secret Key
      • Click 'Save Settings'
      • Modify server path for 'Formatting Templates' while you're here

|EEHarbor Plugins - Register Keys|

  • Goto Developers -> Addons and scroll down
  • You should see some plugins that say Invalid License, these are all EEHarbor plugins and we need to generate new keys
  • Goto EEHarbor.com and login
    • Generate new licenses for each affected plugin in the Account page
    • Edit the License to include the Production Domain, Staging Domain (if applicable), and enter the Site Name under Notes, and click 'Update License'
    • Copy the License Code and paste it into the correct plugin (clicking into the plugin will automatically redirect you to the license screen) and 'Save License Key'
    • Move onto the next one
    • Rinse and repeat until all of those warning are gone

|Favicon|

Every site needs a favicon, that little icon up in your browser bar.

  • Our builds usually come with one, in which case copy it into the root of the site
  • If one doesn't exist, have John, Steph, or Mary create one
    • It should be 128x128 png, usually of the logo, or part of the logo
    • Once you have the PNG, goto https://convertico.com/, upload the image file, convert it, then download the .ico
    • Name it 'favicon.ico'
    • Upload the favicon.ico file to the root of the site (overwrite the one that is there)

|Apple Touch Icon|

Every site also needs an apple touch icon, which is used as an icon on mobile devices

  • Our builds don't usually come with one, so have John, Steph, or Mary create one
    • It should be 180x180 png, usually of the logo, or part of the logo
    • Once you have the PNG, name it 'apple-touch-icon.png'
    • Upload the apple-touch-icon.png file to the root of the site (overwrite the one that is there)

|Add This Template Variable (if applicable)|

This is really only needed if there is going to be a Blog

  • Goto https://www.addthis.com/login?next=/dashboard
    • Login with the omahamediagroup@gmail.com account
    • Click My Site -> Add Profile and enter the name of the Site, click 'Add'
    • Click 'Tools' and then 'Add New Tool'
    • Choose 'Share Buttons', here are the Standard Settings we use
      • Inline
      • Selected By You
        • Facebook
        • Twitter
        • LinkedIn
        • PrintFriendly
        • Email
        • AddThis
      • Design
        • Style - Medium (20x20)
        • Hide Network Names - Yes
    • Click Activate Tool
    • Copy the generated '
  • Back in the new sites EE
    • Goto Template Manager -> Template Variables -> add_this_v
    • You'll see the variable from the example above
    • Replace the script tag with the new one
    • 'Save Template Variable'

|Setup Disqus (if applicable)|

Like Add This, Disqus really only needs to be added if the site is going to have a Blog

  • Let's Create a New Google account
    • Use the Site Name for the Name
    • omg.site_name@gmail.com
    • Enter a password, doesn't matter, it's going to be logged in Asana
    • January 1, 1990 for Birthday
    • Gender: Rather Not Say
    • Agree to Terms
  • Goto Disqus.com
    • Click 'Get Started'
    • Choose Google
    • Select the account you just setup
    • Use the same password, agreet to terms, and then click 'Sign Up'
    • Choose 'I want to install Disqus on my site'
    • Enter the Site Name for Website Name, choose a Category, then click 'Create Site'
    • Choose the Basic, Free plan
    • At the Bottom, choose the 'Universal Code' option
    • Copy the code element, but start at the '(function() { //DON't EDIT BELOW THIS LINE' line, copy everything below
      • Our partial has EE code and there is no point redoing this
  • Back at your site in EE
    • Goto Template Manager -> Template Partials -> disqus_p
    • You'll see the coded example above
    • Replace your function() area with the code you copied
    • 'Save Partial'
  • In the Asana project description, add a not for the new Google and Disqus accounts

/* Google / Disqus Account */
omg.site_name@gmail.com
PassWord1!

|Install any Deployables needed|

Pretty simple, but this is based on the requirements of the site. Then all you have to do is follow the instructions for each one you need to install.

For a full list, with instructions for each, view our handy EE Deployables Wiki Category!

|Add Project and Version to Spreadsheet|

There's a Spreadsheet in Drive for keeping track of all EE Sites and their current version number. Just add this site to the Spreadsheet.

https://docs.google.com/spreadsheets/d/13ms-jsTWnNP1kmjiYghIshN4dxg2Hpsy9b_eJCheGJg/edit?usp=sharing

|Freeform - Update Formatting Templates Path|

  • FreeForm -> Settings -> Formatting Templates
  • Update the Directory Path to match the current environment
    • You'll know this is right when you save it and 'custom.html' appears in the template list

|Repo: Deploy Commit|

Open terminal and insert these commands verbatim

Further Reading