How to set up Lighthouse CI with a Docker Dashboard

lighthouse-ci-docker.md

How to set up Lighthouse CI with Github Actions + GKE Dashboard to record data

Basic set up reference: Lighthouse CI repo

Setting up Lighthouse CI with Github Actions

1. Need to authorize the Github LHCI App for that specific repo: https://github.com/apps/lighthouse-ci
2. Take that token and put it in Repo > Settings > Secrets as LHCI_GITHUB_APP_TOKEN
3. To create a Github Workflow, you need to create a folder under your repo /.github/workflows/ And add a file named lighthouse.yml (could be named anything.yml).

Here's an example file, with the secret from Github. Feel free to modify how it gets called (whether on push, pull_request, etc). See Github Workflow Syntax for reference

name: Lighthouse Check
on: 
  pull_request:
    branches:
      - staging
      - master
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install, build
        run: |
          npm install
          npm run build
      - name: run Lighthouse CI
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

You can submit a PR and test it out at this point

To set up a Lighthouse Server to record data

Overview: here you'll set up a server on GKE to record the data that Lighthouse CI outputs, and to track it over time. It requires Docker and Google Cloud project already set up.

Reference: Lighthouse CI docker-server

1. Download/Install Docker Desktop
2. Have a google project ready to go in Google Cloud
3. Install the LH CLI tool: npm install -g @lhci/cli
4. To authenticate your CLI gcloud auth login
5. Set your project: gcloud config set project $PROJECT_ID
6. Set your region: gcloud config set compute/zone $COMPUTE_ZONE (if you don't know, just choose one: e.g. us-central1-c)
7. Here the command to Create our Kubernetes cluster for LHCI doesn't work in my CLI (gcloud container clusters create lhci-cluster --num-nodes=1) When I ran this the first time I received the error in my Shell:

ERROR: (gcloud.container.clusters.create) ResponseError: code=400, message=Project "$PROJECT_ID" has no network named "default".

Turns out this is because the default service was deleted previously. So I had to do this manually. In Google Cloud Console, under Kubernetes Enginer, create cluster with name: lhci-server and with 1 node (required editing default-pool) to use the cheapest possible machine that can handle a container: g1 micro.

8. Next, the documentation asks to run kubectl but I ran into the error

error: unable to recognize "./kubernetes/lhci-data-claim.yml": Get http://localhost:8080/api?timeout=32s: dial tcp [::1]:8080: connect: connection refused

We aren't connected to Kubernetes. To connect from our shell, in GCloud console, click Connect next to the lhci-server once that cluster has instantiated and copy/paste the get-credentials command 9. Paste that into your shell to connect, then proceed with the rest of the instructions

# This line is not in the LHCI documentation
gcloud container clusters get-credentials lhci-server --zone $COMPUTE_ZONE --project $PROJECT_ID

# Deploy the LHCI server pod
kubectl apply -f ./kubernetes/lhci-data-claim.yml
kubectl apply -f ./kubernetes/lhci-pod.yml

# Make sure our pod was created successfully
kubectl get pods

# Expose LHCI to the internet
kubectl expose pod lhci-pod --type=LoadBalancer --port 80 --target-port 9001 --name=lhci-server

# Check the IP of your LHCI server installation!
kubectl get service

# lhci-server's EXTERNAL-IP is your `LHCI_SERVER_BASE_URL`
# NAME          TYPE           CLUSTER-IP     EXTERNAL-IP    PORT(S)        AGE
# kubernetes    ClusterIP      10.X.X.X       <none>         443/TCP        9m
# lhci-server   LoadBalancer   10.X.X.X       X.X.X.X        80:XXXXX/TCP   2m

• Take note of that external IP.

• Back in your Shell, run lhci wizard

• In the wizard, it will ask for the URL: What is the URL of your LHCI server?

• Enter http://[THAT_EXTERNAL_IP_ABOVE/

• It will generate a token to add data, and an admin token. Take the first and add it to your Github Secrets under LHCI_TOKEN

• Also add your URL as a Secret

and then update your workflow code

name: Lighthouse Check
on: 
  push:
    branches:
      - staging
      - master
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install, build
        run: |
          npm install
          npm run build
      - name: run Lighthouse CI
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          LHCI_TOKEN: ${{ secrets.LHCI_SERVER_TOKEN }}
          LHCI_SERVER_URL: ${{ secrets.LHCI_SERVER_URL }}
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.serverBaseUrl="$LHCI_SERVER_URL" || echo "LHCI failed!"