Action deployment

.github/workflows/deploy.yml

@@ -0,0 +1,91 @@
+name: Component Deploy
+
+on:
+  pull_request:
+
+env:
+  ARCCTL_CACHE_KEY: arcctl-0.3.1 # Hardcoding a version number here so we don't keep downloading this
+  ARC_DATACENTER: gh-datacenter # gh-serverless-dc
+  ARC_ENVIRONMENT: ./environments/qa.yml
+  GCP_ACCOUNT_NAME: gcp-test
+  GCP_PROJECT: permanent-environment-testing
+  COMPONENT_NAME: tyleraldrich/twitter-clone:latest
+  XDG_CONFIG_HOME: ./arcctl-config/
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: arcctl binary
+        id: arcctl-cache
+        uses: actions/cache@v3
+        with:
+          path: ./arcctl
+          key: ${{ env.ARCCTL_CACHE_KEY }}
+      - if: ${{ steps.arcctl-cache.outputs.cache-hit != 'true' }}
+        name: Download arcctl
+        run: curl -SL https://arcctl-dcs.nyc3.digitaloceanspaces.com/arcctl --output arcctl
+      - name: Make arcctl executable
+        run: chmod +x ./arcctl
+      - name: arcctl config
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.XDG_CONFIG_HOME }}
+          key: ${{ github.event.pull_request.number }}
+      - name: Setup arcctl backend
+        run: ./arcctl set state.backend --provider s3 --creds accessKeyId=${{ secrets.BUCKET_ACCESS_KEY_ID }} --creds secretAccessKey=${{ secrets.BUCKET_ACCESS_KEY }} --creds endpoint=https://nyc3.digitaloceanspaces.com --creds region=nyc3 --namespace arcctl-dcs
+  build_component:
+    runs-on: ubuntu-latest
+    needs: setup
+    steps:
+      - uses: actions/checkout@v3
+      - name: Load arcctl binary
+        id: arcctl-cache
+        uses: actions/cache@v3
+        with:
+          path: ./arcctl
+          key: ${{ env.ARCCTL_CACHE_KEY }}
+      - name: arcctl config
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.XDG_CONFIG_HOME }}
+          key: ${{ github.event.pull_request.number }}
+      - name: Docker Login
+        uses: docker/login-action@v2.2.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build component
+        run: ./arcctl build architect.yml -t ${{ env.COMPONENT_NAME }}
+      - name: Push component
+        run: ./arcctl push ${{ env.COMPONENT_NAME }}
+  deploy_component:
+    runs-on: ubuntu-latest
+    needs: build_component
+    steps:
+      - uses: actions/checkout@v3
+      - id: auth
+        name: Authenticate to Google Cloud
+        uses: google-github-actions/auth@v1
+        with:
+          credentials_json: ${{ secrets.GOOGLE_CREDENTIALS }}
+          create_credentials_file: true
+      # Install gcloud, `setup-gcloud` automatically picks up authentication from `auth`.
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@v1
+      - name: Setup GKE gcloud auth plugin
+        run: gcloud components install gke-gcloud-auth-plugin
+      - name: Load arcctl binary
+        id: arcctl-cache
+        uses: actions/cache@v3
+        with:
+          path: ./arcctl
+          key: ${{ env.ARCCTL_CACHE_KEY }}
+      - name: arcctl config
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.XDG_CONFIG_HOME }}
+          key: ${{ github.event.pull_request.number }}
+      - name: Apply environment
+        run: ./arcctl apply env qa-${{ github.event.pull_request.number }} ${{ env.ARC_ENVIRONMENT }} -d ${{ env.ARC_DATACENTER}} --auto-approve

.gitignore

@@ -33,3 +33,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+secret/

app/(home)/home-yeet-form.tsx

@@ -21,9 +21,9 @@ export const HomeYeetForm = () => {
       body: JSON.stringify({
         message,
       }),
+    }).then(() => {
+      location.reload();
     });
-
-    location.reload();
   };
 
   return session ? (

app/(home)/page.tsx

@@ -5,8 +5,8 @@ import { PageHeader } from '../_components/page-header';
 import { HomeYeetForm } from './home-yeet-form';
 
 export const metadata: Metadata = {
-  title: 'The Y Feed',
-  description: 'A list of messages yeeted into the ether',
+  title: 'Y Feed',
+  description: 'A list of messages yeeted into the ether!',
 };
 
 const HomePage = () => {

app/_components/app-layout.tsx

@@ -18,6 +18,7 @@ import {
 import { Button } from './button';
 import { classNames, getGravatarImageUrl } from './utils';
 import { Avatar } from './avatar';
+import { oryUserAddr } from '../ory';
 
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
@@ -81,23 +82,15 @@ export const AppLayout = ({ children }: React.PropsWithChildren) => {
     navigation.push(
       {
         name: 'Sign in',
-        href:
-          process.env.NEXT_PUBLIC_USER_SERVICE_ADDR?.replace(/\/$/, '') +
-          '/login?return_to=' +
-          returnTo,
+        href: `${oryUserAddr}/login?return_to=${returnTo}`,
         icon: UserIcon,
         current: false,
         inverted: false,
         disabled: false,
       },
       {
         name: 'Sign up',
-        href:
-          process.env.NEXT_PUBLIC_USER_SERVICE_ADDR?.replace(/\/$/, '') +
-          '/registration?return_to=' +
-          returnTo +
-          '&after_verification_return_to=' +
-          returnTo,
+        href: `${oryUserAddr}/registration?return_to=${returnTo}&after_verification_return_to=${returnTo}`,
         icon: UserIcon,
         current: false,
         inverted: true,

app/_components/button.tsx

@@ -42,5 +42,6 @@ export const Button = (props: ButtonProps) => {
   }
 
   const btn = <button {...props} className={classes.join(' ')} />;
-  return props.href ? <Link href={props.href}>{btn}</Link> : btn;
+  // Using a Link will not work if the href is external, e.g. during login flow.
+  return props.href ? <a href={props.href}>{btn}</a> : btn;
 };

app/ory.ts

@@ -1,9 +1,7 @@
 import * as sdk from '@ory/client';
 
-export const oryPublicAddr = process.env.NEXT_PUBLIC_KRATOS_ADDR?.replace(
-  /\/$/,
-  ''
-);
+export const oryUserAddr = process.env.NEXT_PUBLIC_USER_SERVICE_ADDR;
+export const oryPublicAddr = process.env.NEXT_PUBLIC_KRATOS_ADDR;
 
 export const oryClient = new sdk.FrontendApi(
   new sdk.Configuration({
@@ -16,7 +14,7 @@ export const oryClient = new sdk.FrontendApi(
 
 export const oryServer = new sdk.FrontendApi(
   new sdk.Configuration({
-    basePath: process.env.KRATOS_ADDR?.replace(/\/$/, ''),
+    basePath: process.env.KRATOS_ADDR,
     baseOptions: {
       withCredentials: true,
     },

app/provider.tsx

@@ -3,7 +3,7 @@
 import { Provider as ReduxProvider } from 'react-redux';
 import { store } from '@/store';
 import { PropsWithChildren, useRef } from 'react';
-import { AuthState, setAuthData } from '@/store/authSlice';
+import { setAuthData } from '@/store/authSlice';
 import { Session } from '@ory/client';
 
 export const Provider = (

architect.yml

@@ -6,7 +6,7 @@ databases:
 
 dependencies:
   kratos:
-    component: architectio/kratos
+    component: tyleraldrich/kratos
     variables:
       allowed_return_urls:
         - ${{ ingresses.app.url }}
@@ -22,8 +22,8 @@ deployments:
     image: ${{ builds.frontend.id }}
     environment:
       DB_URL: ${{ databases.main.url }}
-      KRATOS_ADDR: ${{ dependencies.kratos.services.kratos-public.url }}
-      KRATOS_ADMIN_ADDR: ${{ dependencies.kratos.services.kratos-admin.url }}
+      KRATOS_ADDR: ${{ dependencies.kratos.ingresses.kratos-public.url }}
+      KRATOS_ADMIN_ADDR: ${{ dependencies.kratos.ingresses.kratos-admin.url }}
       NEXT_PUBLIC_SELF_ADDR: ${{ ingresses.app.url }}
       NEXT_PUBLIC_KRATOS_ADDR: ${{ dependencies.kratos.ingresses.kratos-public.url }}
       NEXT_PUBLIC_USER_SERVICE_ADDR: ${{ dependencies.kratos.ingresses.auth.url }}