Migrate aks changes to prod branches

.github/workflows/deploy_dev.yml

@@ -9,30 +9,19 @@ jobs:
   deploy-dev:
     runs-on: ubuntu-latest
     steps:
-      - name: "Set time zone to Europe/Helsinki"
-        uses: zcong1993/setup-timezone@master
-        with:
-          timezone: "Europe/Helsinki"
       - name: Set current date to be accessible later with steps.date.outputs.date
         id: date
-        run: echo "::set-output name=date::$(date +'%d.%m.%Y_%H:%M')"
-      - uses: actions/checkout@v2
+        run: echo "::set-output name=date::$(TZ='Europe/Helsinki' date +'%d.%m.%Y_%H:%M')"
+      - uses: actions/checkout@v4
         with:
           ref: develop
       - name: Build UI and publish Docker image
-        uses: elgohr/Publish-Docker-Github-Action@master
+        uses: elgohr/Publish-Docker-Github-Action@v5
         with:
           name: hsldevcom/jore-map-ui
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
-          buildargs: APP_ENVIRONMENT=dev, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }} APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
+          buildargs: APP_ENVIRONMENT=dev, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }} APP_DOMAIN=${{ secrets.APP_DOMAIN_DEV }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
           tags: develop
-      - name: Notify of deployment
-        uses: 8398a7/action-slack@v3
-        if: always()
-        with:
-          status: ${{ job.status }}
-          text: Jore-map DEV deployment status
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/workflows/deploy_prod.yml

@@ -3,36 +3,25 @@ name: Deploy prod
 on:
   push:
     branches:
-      - release-prod
+      - master
 
 jobs:
   deploy-prod:
     runs-on: ubuntu-latest
     steps:
-      - name: "Set time zone to Europe/Helsinki"
-        uses: zcong1993/setup-timezone@master
-        with:
-          timezone: "Europe/Helsinki"
       - name: Set current date to be accessible later with steps.date.outputs.date
         id: date
-        run: echo "::set-output name=date::$(date +'%d.%m.%Y_%H:%M')"
-      - uses: actions/checkout@v2
+        run: echo "::set-output name=date::$(TZ='Europe/Helsinki' date +'%d.%m.%Y_%H:%M')"
+      - uses: actions/checkout@v4
         with:
-          ref: release-prod
+          ref: master
       - name: Build UI and publish Docker image
-        uses: elgohr/Publish-Docker-Github-Action@master
+        uses: elgohr/Publish-Docker-Github-Action@v5
         with:
           name: hsldevcom/jore-map-ui
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_ACCESS_TOKEN }}
-          buildargs: APP_ENVIRONMENT=prod, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }}, APP_DOMAIN_NAME=${{ secrets.APP_DOMAIN_NAME }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
-          tags: release-prod
-      - name: Notify of deployment
-        uses: 8398a7/action-slack@v3
-        if: always()
-        with:
-          status: ${{ job.status }}
-          text: Jore-map PROD deployment status
+          buildargs: APP_ENVIRONMENT=prod, APP_REACT_APP_DIGITRANSIT_API_KEY=${{ secrets.JOREMAPUI_DIGITRANSITAPIKEY_PROD }}, APP_DOMAIN=${{ secrets.APP_DOMAIN_PROD }}, APP_BUILD_DATE=${{ steps.date.outputs.date }}
+          tags: production
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/workflows/test_dev.yml

@@ -21,7 +21,7 @@ jobs:
         #  record: true
         env:
           CYPRESS_E2E: true # Needed to tell babel.config to not load cypress breaking presets
-          CYPRESS_BASE_URL: https://dev.jore-map.hsl.fi
+          CYPRESS_BASE_URL: https:///dev.jore-map.hsldev.com
           CYPRESS_HSLID_CLIENT_ID: ${{ secrets.CYPRESS_HSLID_CLIENT_ID }}
           CYPRESS_HSLID_CLIENT_SECRET: ${{ secrets.CYPRESS_HSLID_CLIENT_SECRET }}
           CYPRESS_HSLID_WRITE_ACCESS_USERNAME: ${{ secrets.CYPRESS_HSLID_WRITE_ACCESS_USERNAME }}
@@ -30,13 +30,13 @@ jobs:
           CYPRESS_HSLID_READ_ACCESS_PASSWORD: ${{ secrets.CYPRESS_HSLID_READ_ACCESS_PASSWORD }}
           # CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} # Only prod updates to record into Cypress.io
       - name: Upload screenshot artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
       - name: Upload video artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: cypress-videos

Dockerfile

@@ -1,14 +1,12 @@
-FROM node:12.16.1-alpine
+FROM node:12.16.1-alpine AS builder
 
-ENV WORK /build
+ENV WORK=/opt/joremapui
 
 RUN mkdir -p ${WORK}
 WORKDIR ${WORK}
 
 # Install app dependencies
-COPY yarn.lock ${WORK}
-COPY package.json ${WORK}
-COPY .yarnrc ${WORK}
+COPY yarn.lock package.json .yarnrc ${WORK}
 RUN yarn
 
 COPY . ${WORK}
@@ -19,13 +17,27 @@ ENV ENVIRONMENT=${APP_ENVIRONMENT}
 ARG APP_REACT_APP_DIGITRANSIT_API_KEY
 ENV REACT_APP_DIGITRANSIT_API_KEY=${APP_REACT_APP_DIGITRANSIT_API_KEY}
 
-ARG APP_DOMAIN_NAME
-ENV DOMAIN_NAME=${APP_DOMAIN_NAME}
+ARG APP_DOMAIN
+ENV APP_DOMAIN=${APP_DOMAIN}
 
 ARG APP_BUILD_DATE
 ENV BUILD_DATE=${APP_BUILD_DATE}
 
 RUN yarn test:ci
 RUN yarn build
 
-CMD yarn run production
+
+FROM node:20-alpine AS server
+
+ENV WORK=/opt/joremapui
+
+# Create app directory
+RUN mkdir -p ${WORK}
+WORKDIR ${WORK}
+
+# Install serve
+RUN yarn global add serve@^14.2.3
+
+COPY --from=builder /opt/joremapui/build build/
+
+CMD ["serve", "-s", "-l", "5000", "build/"]

config/env.js

@@ -78,7 +78,7 @@ function getClientEnvironment(publicUrl) {
                 // images into the `src` and `import` them in code to get their paths.
                 PUBLIC_URL: publicUrl,
                 ENVIRONMENT: process.env.ENVIRONMENT,
-                DOMAIN_NAME: process.env.DOMAIN_NAME,
+                APP_DOMAIN: process.env.APP_DOMAIN,
                 BUILD_DATE: process.env.BUILD_DATE,
                 REACT_APP_DIGITRANSIT_API_KEY: process.env.REACT_APP_DIGITRANSIT_API_KEY
             }

config/webpack.config.prod.js

@@ -305,7 +305,7 @@ module.exports = {
             'process.env.REACT_APP_DIGITRANSIT_API_KEY': JSON.stringify(process.env.REACT_APP_DIGITRANSIT_API_KEY)
         }),
         new webpack.DefinePlugin({
-            'process.env.DOMAIN_NAME': JSON.stringify(process.env.DOMAIN_NAME)
+            'process.env.APP_DOMAIN': JSON.stringify(process.env.APP_DOMAIN)
         }),
         new webpack.DefinePlugin({
             'process.env.BUILD_DATE': JSON.stringify(process.env.BUILD_DATE)

src/components/map/layers/NetworkLayers.tsx

@@ -18,10 +18,9 @@ import VectorGridLayer from './VectorGridLayer';
 import * as s from './networkLayers.scss';
 import { INodePopupData } from './popups/NodePopup';
 
-enum GeoserverLayer {
-    Node = 'solmu',
-    Link = 'linkki',
-    Point = 'piste',
+enum TileserverLayer {
+    Link = 'linkki_view',
+    Point = 'piste_view',
 }
 
 interface INetworkLayersProps {
@@ -40,9 +39,9 @@ interface ILinkProperties {
     lnkloppusolmu: string;
 }
 
-function getGeoServerUrl(layerName: string) {
-    const GEOSERVER_URL = constants.GEOSERVER_URL;
-    return `${GEOSERVER_URL}/gwc/service/tms/1.0.0/joremapui%3A${layerName}@jore_EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;
+function getTileserverUrl(layerName: string) {
+    const TILESERVER_URL = constants.TILESERVER_URL;
+    return `${TILESERVER_URL}/jore.${layerName}/{z}/{x}/{y}.pbf`;
 }
 
 @inject('mapStore', 'networkStore', 'nodeStore', 'linkStore', 'popupStore')
@@ -52,7 +51,7 @@ class NetworkLayers extends Component<INetworkLayersProps> {
 
     private getLinkStyle = () => {
         return {
-            // Layer name 'linkki' is directly mirrored from Jore through geoserver
+            // Layer name 'linkki' is directly mirrored from Jore through tileserver
             linkki: (properties: ILinkProperties) => {
                 const {
                     lnkalkusolmu: startNodeId,
@@ -84,7 +83,7 @@ class NetworkLayers extends Component<INetworkLayersProps> {
 
     private getLinkPointStyle = () => {
         return {
-            // Layer name 'piste' is directly mirrored from Jore through geoserver
+            // Layer name 'piste' is directly mirrored from Jore through tileserver
             piste: (properties: ILinkProperties) => {
                 const {
                     lnkalkusolmu: startNodeId,
@@ -144,10 +143,10 @@ class NetworkLayers extends Component<INetworkLayersProps> {
     };
 
     /**
-     * Sets a reaction object for GeoserverLayer (replaces existing one) so
+     * Sets a reaction object for TileserverLayer (replaces existing one) so
      * that reaction object's wouldn't multiply each time a VectorGridLayer is re-rendered.
      */
-    private setVectorgridLayerReaction = (type: GeoserverLayer) => (
+    private setVectorgridLayerReaction = (type: TileserverLayer) => (
         reaction: IReactionDisposer
     ) => {
         if (this.reactionDisposer[type]) this.reactionDisposer[type]();
@@ -165,11 +164,11 @@ class NetworkLayers extends Component<INetworkLayersProps> {
                     <VectorGridLayer
                         selectedTransitTypes={selectedTransitTypes}
                         selectedDate={selectedDate}
-                        key={GeoserverLayer.Link}
+                        key={TileserverLayer.Link}
                         setVectorgridLayerReaction={this.setVectorgridLayerReaction(
-                            GeoserverLayer.Link
+                            TileserverLayer.Link
                         )}
-                        url={getGeoServerUrl(GeoserverLayer.Link)}
+                        url={getTileserverUrl(TileserverLayer.Link)}
                         interactive={true}
                         vectorTileLayerStyles={this.getLinkStyle()}
                     />
@@ -178,11 +177,11 @@ class NetworkLayers extends Component<INetworkLayersProps> {
                     <VectorGridLayer
                         selectedTransitTypes={selectedTransitTypes}
                         selectedDate={selectedDate}
-                        key={GeoserverLayer.Point}
+                        key={TileserverLayer.Point}
                         setVectorgridLayerReaction={this.setVectorgridLayerReaction(
-                            GeoserverLayer.Point
+                            TileserverLayer.Point
                         )}
-                        url={getGeoServerUrl(GeoserverLayer.Point)}
+                        url={getTileserverUrl(TileserverLayer.Point)}
                         interactive={false}
                         vectorTileLayerStyles={this.getLinkPointStyle()}
                     />

src/components/map/layers/VectorGridLayer.tsx

@@ -50,8 +50,6 @@ class VectorGridLayer extends GridLayer<IVectorGridLayerProps> {
 
     createLeafletElement(props: IVectorGridLayerProps): any {
         const { url, ...options } = props;
-        options.tms = true;
-
         return L.vectorGrid.protobuf(url, options);
     }