spt/Website
spt/Website
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Add items id in items frontend url #25

Merged
Ghost merged 21 commits from feat/add_items_id into development 2021-11-14 19:22:59 -05:00
Conversation 1 Commits 21 Files Changed 18 +166 -104
3 changed files with 166 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d7d66044a1 - Show all commits

184
.drone-kubernetes.yml
View File

@ -10,90 +10,110 @@ trigger:
- push - push
steps: steps:
- name: replace hosts and user variables - name: replace hosts and user variables
image: ubuntu:impish image: ubuntu:impish
environment: environment:
SPT_ITEMS_HOSTNAME: SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname from_secret: spt_items_hostname
DEPLOY_HOSTNAME: DEPLOY_HOSTNAME:
from_secret: deploy_hostname from_secret: deploy_hostname
DEPLOY_USER: DEPLOY_USER:
from_secret: deploy_username from_secret: deploy_username
DEPLOY_PRIVATE_KEY: DEPLOY_PRIVATE_KEY:
from_secret: deploy_ssh_key from_secret: deploy_ssh_key
DEPLOY_SSH_KEY_PASSPHRASE: DEPLOY_SSH_KEY_PASSPHRASE:
from_secret: deploy_ssh_key_passphrase from_secret: deploy_ssh_key_passphrase
commands: commands:
- sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
- mv ./items/frontend/.env.example ./items/frontend/.env - mv ./items/frontend/.env.example ./items/frontend/.env
- echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key
- sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory
- sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
- sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
- name: install frontend dependencies - name: install frontend dependencies
image: node:lts-alpine3.14 image: node:lts-alpine3.14
commands: commands:
- node -v - node -v
- npm -v - npm -v
- yarn --version - yarn --version
- yarn --cwd ./items/frontend install - yarn --cwd ./items/frontend install
depends_on:
- replace hosts and user variables
- name: test frontend - name: frontend
image: node:lts-alpine3.14 image: node:lts-alpine3.14
commands: commands:
- node -v - node -v
- npm -v - npm -v
- yarn --version - yarn --version
- yarn --cwd ./items/frontend cy:run - yarn --cwd ./items/frontend start
detach: true
depends_on:
- install frontend dependencies
- name: build frontend - name: test frontend
image: node:lts-alpine3.14 image: cypress/browsers:node16.5.0-chrome94-ff93
commands: commands:
- node -v - node -v
- npm -v - npm -v
- yarn --version - yarn --version
- yarn --cwd ./items/frontend build --pure-lockfile - yarn --cwd ./items/frontend cy:run
- rm -rf ./items/api/public/static/* depends_on:
- mv ./items/frontend/build/* ./items/api/public - install frontend dependencies
- rm ./items/api/public/index.html
when:
branch:
- main
- master
- development
- name: check ansible syntax - name: build frontend
image: plugins/ansible:3 image: node:lts-alpine3.14
settings: commands:
playbook: ./.ansible-items/playbook.yml - node -v
inventory: ./.ansible-items/inventory - npm -v
galaxy: ./.ansible-items/requirements.yml - yarn --version
syntax_check: true - yarn --cwd ./items/frontend build --pure-lockfile
when: - rm -rf ./items/api/public/static/*
branch: - mv ./items/frontend/build/* ./items/api/public
- development - rm ./items/api/public/index.html
depends_on:
- test frontend
when:
branch:
- main
- master
- development
- name: apply ansible playbook - name: check ansible syntax
image: plugins/ansible:3 image: plugins/ansible:3
settings: settings:
playbook: ./.ansible-items/playbook.yml playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml galaxy: ./.ansible-items/requirements.yml
timeout: 60 syntax_check: true
verbose: 2 when:
environment: branch:
SPT_ITEMS_HOSTNAME: - development
from_secret: spt_items_hostname
DEPLOY_HOSTNAME: - name: apply ansible playbook
from_secret: deploy_hostname image: plugins/ansible:3
DEPLOY_USER: settings:
from_secret: deploy_username playbook: ./.ansible-items/playbook.yml
DEPLOY_USER_GROUP: inventory: ./.ansible-items/inventory
from_secret: deploy_user_group galaxy: ./.ansible-items/requirements.yml
SPT_ITEMS_PATH: timeout: 60
from_secret: deploy_path verbose: 2
when: environment:
branch: SPT_ITEMS_HOSTNAME:
- master from_secret: spt_items_hostname
- main DEPLOY_HOSTNAME:
from_secret: deploy_hostname
DEPLOY_USER:
from_secret: deploy_username
DEPLOY_USER_GROUP:
from_secret: deploy_user_group
SPT_ITEMS_PATH:
from_secret: deploy_path
depends_on:
- check ansible syntax
- build frontend
when:
branch:
- master
- main

9
items/README.md
View File

@ -32,9 +32,12 @@
## The pipeline summary ## The pipeline summary
1. Each push will: 1. Each push will:
1. Builds the frontend 1. Test the frontend
1. Move the build frontend in the backend `public` folder 2. IF on `development` or `master`/`main` branch
1. IF Promoted to production, deploys to the server 1. Builds the frontend
3. IF pushed from `master` or `main` main branch
1. Move the build frontend in the backend `public` folder
2. Deploys to the server
## The pipeline walkthrough ## The pipeline walkthrough
see [Walkthrough.md](./docs/Walkthrough.md) see [Walkthrough.md](./docs/Walkthrough.md)

77
items/docs/Walkthrough.md
View File

@ -6,8 +6,10 @@
* [Pipeline concurrency](#pipeline-concurrency) * [Pipeline concurrency](#pipeline-concurrency)
* [Triggers](#triggers) * [Triggers](#triggers)
* [Steps](#steps) * [Steps](#steps)
* [Fetch and update submodules](#Fetch-and-update-submodules)
* [Replace hosts and user variables](#replace-hosts-and-user-variables) * [Replace hosts and user variables](#replace-hosts-and-user-variables)
* [Install frontend dependencies](#install-frontend-dependencies)
* [Run the frontend](#run-the-frontend)
* [Test frontend](#test-frontend)
* [Build frontend](#build-frontend) * [Build frontend](#build-frontend)
* [Check ansible syntax](#check-ansible-syntax) * [Check ansible syntax](#check-ansible-syntax)
* [Apply ansible playbook](#apply-ansible-playbook) * [Apply ansible playbook](#apply-ansible-playbook)
@ -16,8 +18,8 @@
* [Copy the project](#copy-the-project) * [Copy the project](#copy-the-project)
* [Copy PHP env file](#copy-php-env-file) * [Copy PHP env file](#copy-php-env-file)
* [Get JavaScript chunks name](#get-javascript-chunks-name) * [Get JavaScript chunks name](#get-javascript-chunks-name)
* [Get file names from find output](#get-file-from-find-output) * [Get file names from find output](#get-file-names-from-find-output)
* [Copy app.blade.php file](#copy-app-blade-php-file) * [Copy app.blade.php file](#copy-appbladephp-file)
* [Download and install composer dependencies](#download-and-install-composer-dependencies) * [Download and install composer dependencies](#download-and-install-composer-dependencies)
## Overview ## Overview
@ -25,10 +27,10 @@
* the backend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [api](../api) that points towards [https://dev.sp-tarkov.com/Rev/spt-items-api.git](https://dev.sp-tarkov.com/Rev/spt-items-api.git) * the backend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [api](../api) that points towards [https://dev.sp-tarkov.com/Rev/spt-items-api.git](https://dev.sp-tarkov.com/Rev/spt-items-api.git)
* the frontend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [frontend](../frontend) that points towards [https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git](https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git) * the frontend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [frontend](../frontend) that points towards [https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git](https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git)
* There are two Ansible pipelines * There are two Ansible pipelines
* A docker pipeline [drone-docker.yml](../drone-docker.yml) * A docker pipeline [drone-docker.yml](../../.drone-docker.yml)
* A kubernetes pipeline [drone-kubernetes.yml](../drone-kubernetes.yml) * A kubernetes pipeline [drone-kubernetes.yml](../../.drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../.ansible) * All ansible playbook files are located in [.ansible](../../.ansible-items)
* The documentation is located in [documentation](../documentation) * The documentation is located in [documentation](../docs)
## Pipeline definition ## Pipeline definition
```yml ```yml
@ -50,12 +52,8 @@ The pipeline is set to only one build at a time (every subsequent build with be
trigger: trigger:
event: event:
- push - push
branch:
- master
- main
- development
``` ```
The pipeline is run on every push only on branches `master`, `main` and `development`. We want to check that every development on `development` branch is correct and deploy automatically when merged in `master`/`main`. The pipeline is run on every push We want to check that every development on `development` branch is correct and deploy automatically when merged in `master`/`main`.
## Steps ## Steps
### Replace hosts and user variables ### Replace hosts and user variables
```yml ```yml
@ -90,6 +88,48 @@ The following environment variables are injected using Drone secrets:
Using `sed` makes temporary changes in the container/pod instead of commiting secrets in the repo in plain text. \ Using `sed` makes temporary changes in the container/pod instead of commiting secrets in the repo in plain text. \
The changes are never pushed and are discarded when the container/pod is terminated. The changes are never pushed and are discarded when the container/pod is terminated.
### Install frontend dependencies
```yml
- name: install frontend dependencies
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
depends_on:
- replace hosts and user variables
```
### Run the frontend
```yaml
- name: frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend start
detach: true
depends_on:
- install frontend dependencies
```
The frontend is run and `detach` is specified so the End-to-End tests (using cypress) can run on it
### Test frontend
```yaml
- name: test frontend
image: cypress/browsers:node16.5.0-chrome94-ff93
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend cy:run
depends_on:
- install frontend dependencies
```
Run frontend tests using Cypress
### Build frontend ### Build frontend
```yml ```yml
- name: build frontend - name: build frontend
@ -98,7 +138,6 @@ The changes are never pushed and are discarded when the container/pod is termina
- node -v - node -v
- npm -v - npm -v
- yarn --version - yarn --version
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile - yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/* - rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public - mv ./items/frontend/build/* ./items/api/public
@ -122,7 +161,7 @@ Notes:
syntax_check: true syntax_check: true
``` ```
Executed on every push. \ Executed on every push. \
Check the Ansible syntax in [playbook.yml](../.ansible/playbook.yml), [inventory](../.ansible/inventory) and [requirements.yml](../.ansible/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion. Check the Ansible syntax in [playbook.yml](../../.ansible-items/playbook.yml), [inventory](../../.ansible-items/inventory) and [requirements.yml](../../.ansible-items/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion.
### Apply ansible playbook ### Apply ansible playbook
```yml ```yml
@ -164,7 +203,7 @@ The following environment variables are injected using Drone secrets:
```yml ```yml
hosts: sptarkov hosts: sptarkov
``` ```
Uses the host defined in [inventory](../.ansible/inventory). Remember, the step [Replace hosts and user variables](#replace-hosts-and-user-variables) already replaced the variables at this point. Uses the host defined in [inventory](../../.ansible-items/inventory). Remember, the step [Replace hosts and user variables](#replace-hosts-and-user-variables) already replaced the variables at this point.
#### Delete old spt-items-api #### Delete old spt-items-api
```yml ```yml
@ -192,7 +231,7 @@ Copies the whole project (frontend and backend) from the [api](../api) folder in
src: ./templates/.php-env.j2 src: ./templates/.php-env.j2
dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/.env" dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/.env"
``` ```
Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP .env file](../.ansible/templates/.php_env.j2). \ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP .env file](../../.ansible-items/templates/.php-env.j2). \
`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) \ `SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) \
`SPT_ITEMS_HOSTNAME` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) `SPT_ITEMS_HOSTNAME` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook))
@ -203,7 +242,7 @@ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [temp
cmd: find "{{ lookup('env', 'SPT_ITEMS_PATH') }}" -type f -name "*chunk.js" -printf "%f\n" cmd: find "{{ lookup('env', 'SPT_ITEMS_PATH') }}" -type f -name "*chunk.js" -printf "%f\n"
register: find_output register: find_output
``` ```
Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../.ansible/templates/app.blade.php.j2) template. \ Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../../.ansible-items/templates/app.blade.php.j2) template. \
`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) `SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook))
#### Get file names from find output #### Get file names from find output
@ -212,7 +251,7 @@ Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../.ansi
set_fact: set_fact:
chunk_list: "{{ find_output['stdout'].split('\n') }}" chunk_list: "{{ find_output['stdout'].split('\n') }}"
``` ```
Splits the string containing the list of all JavaScript chunk files for the [app.blade.php.j2](../.ansible/templates/app.blade.php.j2) template. Splits the string containing the list of all JavaScript chunk files for the [app.blade.php.j2](../../.ansible-items/templates/app.blade.php.j2) template.
#### Copy app.blade.php file #### Copy app.blade.php file
```yml ```yml
@ -221,7 +260,7 @@ Splits the string containing the list of all JavaScript chunk files for the [app
src: ./templates/app.blade.php.j2 src: ./templates/app.blade.php.j2
dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/resources/views/app.blade.php" dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/resources/views/app.blade.php"
``` ```
Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP app.blade.php file](../.ansible/templates/app.blade.php.j2). \ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP app.blade.php file](../../.ansible-items/templates/app.blade.php.j2). \
`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)). `SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)).
#### Download and install composer dependencies #### Download and install composer dependencies