feat: Optimize build (static export) (#1)

* feat: Upgrade dependencies (next, react, postcss)

* feat(deploy): Enable static export

* feat(deploy): Enable multi-stage docker build

* feat(deploy): Enable gzip compression for type application/javascript

.github/workflows/deploy.yaml

@@ -13,6 +13,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v4
+ - run: echo ${{ secrets.ENV_LOCAL }} | base64 -d > .env.local
  - run: echo ${{ secrets.DOCKER_HUB_TOKEN }} | docker login -u loicag --password-stdin
  - run: docker build . -t loicag/compteurs-velo:latest
  - run: docker build . -t loicag/compteurs-velo:$(date +%F)
@@ -29,10 +30,3 @@ jobs:
  -d '{"name":"loicag/compteurs-velo", "tag":"latest"}'
  -H "Content-Type: application/json"
  -X POST https://keel.loicgombeaud.com/v1/webhooks/native
- - run: sleep 60 # Time needed for the image to be pulled and started
- warmup:
- needs: deploy
- name: Warm up application cache
- runs-on: ubuntu-latest
- steps:
- - run: curl https://compteurs-velo.loicgombeaud.com

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20.6.1-alpine3.18
+FROM node:20.6.1-alpine3.18 AS build
 
 # Set working directory
 WORKDIR /compteurs
@@ -30,6 +30,11 @@ ADD . .
 ENV NODE_OPTIONS=--openssl-legacy-provider
 RUN yarn build
 
-# Configure server
-ENTRYPOINT node_modules/.bin/next
-CMD start
+# Clean up the out directory
+RUN rm out/compteurs.csv
+
+####
+FROM nginx:1.25.2-alpine
+
+COPY --from=build /compteurs/out/ /usr/share/nginx/html/
+COPY nginx.conf /etc/nginx/conf.d/default.conf

deploy/templates/service.yaml

@@ -7,6 +7,6 @@ spec:
  ports:
  - protocol: TCP
  port: 80
- targetPort: 3000
+ targetPort: 80
  selector:
  {{- include "compteurs-velo.selectorLabels" . | nindent 4 }}

deploy/values.yaml

@@ -36,7 +36,7 @@ ingress:
  nginx.ingress.kubernetes.io/ssl-redirect: "true"
  nginx.ingress.kubernetes.io/server-snippet: |
  gzip on;
- gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+ gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
 
 mapbox:
  center: 44.837761,-0.5778544

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,3 +1,4 @@
 module.exports = {
  basePath: process.env.BASE_PATH,
+ output: 'export',
 };

nginx.conf

@@ -0,0 +1,11 @@
+server {
+ listen 80;
+ server_name localhost;
+ location / {
+ root /usr/share/nginx/html;
+ index index.html;
+ rewrite ^/details/(.*)?$ /details/$1.html break;
+ }
+ error_page 404 /404.html;
+ error_page 500 502 503 504 /50x.html;
+}

package.json

@@ -16,10 +16,10 @@
  "lodash": "^4.17.20",
  "luxon": "^1.25.0",
  "mapbox-gl": "^1.12.0",
- "next": "9.5.3",
+ "next": "^13.3.0",
  "papaparse": "^5.3.0",
- "react": "16.13.1",
- "react-dom": "16.13.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
  "slugify": "^1.4.5",
  "vega": "^5.20.0",
  "vega-embed": "^6.17.0",
@@ -31,8 +31,9 @@
  "@types/luxon": "^1.24.4",
  "@types/mapbox-gl": "^1.12.0",
  "@types/papaparse": "^5.2.2",
- "@types/react": "^16.9.49",
- "postcss-preset-env": "^6.7.0",
+ "@types/react": "^18.2.0",
+ "postcss": "^8.0.0",
+ "postcss-preset-env": "^7.0.0",
  "prettier": "^2.1.2",
  "tailwindcss": "^1.8.7",
  "typescript": "^4.0.2"

tsconfig.json

@@ -1,7 +1,11 @@
 {
  "compilerOptions": {
  "target": "es2016",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
  "allowJs": true,
  "skipLibCheck": true,
  "strict": false,
@@ -12,8 +16,15 @@
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
- "jsx": "preserve"
+ "jsx": "preserve",
+ "incremental": true
  },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
 }