Campaign Linker

# Deployment

If you want to host your own instance of the application you can do quickly by following this guide. The guide assumes basics experience working with the terminal and git but most task can be performed with simple copy&paste.

# Google App Engine

The Campaign Linker is build with the cloud in mind and currently runs only on Google App Engine. GAE is a platform as a service offering in the Google Cloud Platform to "Build highly scalable applications on a fully managed serverless platform". In just a few steps we can deploy the application in an environment that scales to zero when traffic goes down but also scales up almost instantly when more performance is needed. A NoSQL database, SSL certificates, logging, monitoring and other services are built in by default.

WARNING

Eventhough Google App Engine is very cost effectiv for small and medium sized applications and Google offers a generous free tier, the platform is not free to use and one of the first steps is to create a billing account with a credit card.

# Preparation

Before we configure the application, we need to prepare your Google Cloud Platform.

# Create a Google Cloud Project

It is best practice to create a new Google Cloud project for your Campaign Linker deployment. This will separate the work you are doing here from other projects.

  1. Open the Google Cloud Console and click the project picker in the top navigation.
  2. On the now open modal, click NEW PROJECT.
  3. Give your project a new and click CREATE.
  4. After just a moment you can select your new project from the project picker in the top navigation.
  5. On the GCP home dashboard, look for the project info card and note the Project ID.

TIP

If your Google account is part of an organisation, you might not have the user permissions to create new projects. In this case you will have to contact your organisation administrators.

# Create a OAuth 2.0 Client

In order for the Campaign Linker to log in user, the application requires a consent screen and an OAuth 2.0 client.

  1. Open the GCP APIs & Services page, fill out the required consent information and add YOUR-PROJECT_ID.appspot.com as an authorised domain.
  2. Switch to the Credentials tab, click Create credentials and select OAuth client ID.
  3. Select Web application and give the client a name.
  4. Add https://YOUR-PROJECT_ID.appspot.com as an Authorised JavaScript origin and https://YOUR-PROJECT_ID.appspot.com/oauth/callback as an Authorised redirect URI.
  5. Click save and note the client ID and client secret.

# Prepare the back end application

In prepartion for the deployment, we will have to prepare the source code.

  1. Clone the source code to your local machine by running:

    git clone git@gitlab.com:trakken/campaign-linker.git

    Alternatively, you can also download the source from https://gitlab.com/trakken/campaign-linker

  2. Add your client secret and ID to the file backend/app.yaml :

    # backend/app.yaml
...
env_variables:
FLASK_ENV: production
GOOGLE_CLIENT_ID: REPLACE_GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET: REPLACE_GOOGLE_CLIENT_SECRET

handlers:
...

  3. Install inside the backend folder all dependencies which are listed in backend/requirements.txt with following command:

    $ pip install -r requirements.txt -t lib

# Prepare the front end application

  1. To build the front end appliction you will require node and yarn or npm. Make sure it is installed on your machine by running the following in a terminal:

    $ node -v
v10.15.0
$ yarn -v # OR npm -v
1.13.0

    If the comand fails, follow the links above and installed the required dependencies.

  2. Also in a terminal, navigate to the frontend folder and run the build commands:

    yarn install
yarn build-production # OR npm run build-production

    The front end is now ready for deployment in frontend/dist.

  3. Now navigate in a terminal to the docs folder and run this build commands:

    yarn install
yarn docs:build # OR npm run docs:build

    The docs are now ready for deployment in docs/.vuepress/dist.

# Deploy the front and back end services

  1. Google App Engine deployments rely on the Google Cloud SDK. A powerful comand line interface with commands for all GCP products. Install it on your machine and run the following command in terminal to verify installation:

    $ gcloud --version
Google Cloud SDK 230.0.0
...

    You also need to login with the same Google Account you used to create the GCP project:

    $ gcloud auth login
Your browser has been opened to visit:
...

  2. Navigate your terminal to the root folder of the repository and start the deployment by running:

    $ gcloud --project=YOUR_GCP_PROJECT app deploy \
    frontend/dist/app.yaml \
    backend/app.yaml \
    docs/docs/.vuepress/dist/app.yaml \
    dispatch.yaml

    The comand will create three separate App Engine services and setup the routing to put them all on the same domain with different paths. To view your new application you can open https://YOUR_PROJECT_ID.appspot.com.

Customization →