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
steps:
- name: replace hosts and user variables
image: ubuntu:impish
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
DEPLOY_USER:
from_secret: deploy_username
DEPLOY_PRIVATE_KEY:
from_secret: deploy_ssh_key
DEPLOY_SSH_KEY_PASSPHRASE:
from_secret: deploy_ssh_key_passphrase
commands:
- sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
- mv ./items/frontend/.env.example ./items/frontend/.env
- 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_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
- sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
- name: replace hosts and user variables
image: ubuntu:impish
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
DEPLOY_USER:
from_secret: deploy_username
DEPLOY_PRIVATE_KEY:
from_secret: deploy_ssh_key
DEPLOY_SSH_KEY_PASSPHRASE:
from_secret: deploy_ssh_key_passphrase
commands:
- sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
- mv ./items/frontend/.env.example ./items/frontend/.env
- 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_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
- sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
- name: install frontend dependencies
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
- 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
- name: test frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend cy:run
- 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
- name: build frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
when:
branch:
- main
- master
- development
- 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
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
syntax_check: true
when:
branch:
- development
- name: build frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
depends_on:
- test frontend
when:
branch:
- main
- master
- development
- name: apply ansible playbook
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
timeout: 60
verbose: 2
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
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
when:
branch:
- master
- main
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
syntax_check: true
when:
branch:
- development
- name: apply ansible playbook
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
timeout: 60
verbose: 2
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
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
1. Each push will:
1. Builds the frontend
1. Move the build frontend in the backend `public` folder
1. IF Promoted to production, deploys to the server
1. Test the frontend
2. IF on `development` or `master`/`main` branch
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
see [Walkthrough.md](./docs/Walkthrough.md)

77
items/docs/Walkthrough.md
View File

@ -6,8 +6,10 @@
* [Pipeline concurrency](#pipeline-concurrency)
* [Triggers](#triggers)
* [Steps](#steps)
* [Fetch and update submodules](#Fetch-and-update-submodules)
* [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)
* [Check ansible syntax](#check-ansible-syntax)
* [Apply ansible playbook](#apply-ansible-playbook)
@ -16,8 +18,8 @@
* [Copy the project](#copy-the-project)
* [Copy PHP env file](#copy-php-env-file)
* [Get JavaScript chunks name](#get-javascript-chunks-name)
* [Get file names from find output](#get-file-from-find-output)
* [Copy app.blade.php file](#copy-app-blade-php-file)
* [Get file names from find output](#get-file-names-from-find-output)
* [Copy app.blade.php file](#copy-appbladephp-file)
* [Download and install composer dependencies](#download-and-install-composer-dependencies)
## 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 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
* A docker pipeline [drone-docker.yml](../drone-docker.yml)
* A kubernetes pipeline [drone-kubernetes.yml](../drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../.ansible)
* The documentation is located in [documentation](../documentation)
* A docker pipeline [drone-docker.yml](../../.drone-docker.yml)
* A kubernetes pipeline [drone-kubernetes.yml](../../.drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../../.ansible-items)
* The documentation is located in [documentation](../docs)
## Pipeline definition
```yml
@ -50,12 +52,8 @@ The pipeline is set to only one build at a time (every subsequent build with be
trigger:
event:
- 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
### Replace hosts and user variables
```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. \
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
```yml
- name: build frontend
@ -98,7 +138,6 @@ The changes are never pushed and are discarded when the container/pod is termina
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
@ -122,7 +161,7 @@ Notes:
syntax_check: true
```
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
```yml
@ -164,7 +203,7 @@ The following environment variables are injected using Drone secrets:
```yml
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
```yml
@ -192,7 +231,7 @@ Copies the whole project (frontend and backend) from the [api](../api) folder in
src: ./templates/.php-env.j2
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_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"
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))
#### 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:
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
```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
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)).
#### Download and install composer dependencies