Ridibooks

            .--.                   .---.
        .---|__|           .-.     |~~~|
     .--|===|--|_          |_|     |~~~|--.
     |  |===|  |'\     .---!~|  .--|   |--|
     |%%|   |  |.'\    |===| |--|%%|   |  |
     |%%|   |  |\.'\   |   | |__|  |   |  |
     |  |   |  | \  \  |===| |==|  |   |  |
     |  |   |__|  \.'\ |   |_|__|  |~~~|__|
     |  |===|--|   \.'\|===|~|--|%%|~~~|--|
     ^--^---'--^    `-'`---^-^--^--^---'--' hjw

       (https://www.asciiart.eu/books/books)

Infrastructure

             +------------+
             | CloudFlare |
             +----+-------+                               Function Package from S3
                  |                                                   |
     +---------+--+->+------------+--->+-------------+--->+--------+  | +--------+
     |         |  |  | CloudFront |    | API Gateway |    | Lambda |<---+        |
     |         +<-+--+------------+<---+-------------+<---+--------+    |        |
     |   Web   |  |    Caching              First Rendered HTML         |   S3   |
     | Browser |  |                                                     | Bucket |
     |         +--+->+------------+------------------------------------>+        |
     |         |  |  | CloudFront |                                     |        |
     +-----+---+<-+--+------------+<------------------------------------+----+---+
           |      |    Caching              Static Files                     ^
           |      +                                                          | D
           |                     +--------+                                  | E
           +-------------------->+ Sentry +<---------------------------------+ P
                 (Un)Known Bug   +----+---+         SourceMap                | L  (with Serverless.js)
                                      |                                      | O
                                      v                                      | Y
                                  +---+---+         +-----------+            | !
                                  | Slack +-------->+ Developer +------------>
                                  | Asana |  WORK   +-----------+   WORK
                                  |  ETC  |
                                  +-------+

cloudflare (proxied=true)

  CNAME *.cloudfront.net
    * pagerules
      * Cache on Cookie

cloudfront

  * Path Pattern
    * Default (*)
      * origin: alb
      * Forward Cookies
    * _next/static/
      * origin: s3
      * 비고
        * developemnt only
        * books-static.ridi.io 대체

alb

  invoke lambda by cookie

lambda

  serverless application

s3

  * _next/static/
  * serverless/books/

Development

Requirements

• Docker
• Install packages

$ yarn install --frozen-lockfile

Serve with TLS

First run traefik,

$ docker-compose up -f docker-compose.yml -f docker-compose.traefik.yml -d
...
$ open https://books.local.ridi.io

or

$ cp docker-compose.traefik.yml docker-compose.override.yml

Enjoying development!

Testing

Sourcecode

$ yarn test

E2E (cypress.io)

Set Environment Variable

$ export CYPRESS_BASE_URL=[baseURL]

Run Cypress Local

$ npx cypress cache clear
$ npx cypress run

Branches

master

staging

development

• Deploy to https://books.ridi.io

Feature branches

• You should be able to guess the issue by branch name.

ex) feat/add-background-color hotfix/fix-login-bug refactor/refactoring-layout-component

FAQ

How to make cypress test cases

https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell

Environment variables

build time

ASSET_PREFIX
  * next plugins
STAGE
  * dotenv
  * CSP
  * Sentry Environment
NODE_ENV
  * next custom server
  * SentryCliPlugin
  * DefinePlugin
  * @ridi/event-tracker:development
NEXT_STATIC_*
  * source codes

runtime

ASSET_PREFIX
  * next/document
NODE_ENV
  * next custom server
SERVERLESS
  * next custom server