Why I left App Engine for Cloud Run

J.Cho — Thu, 25 Apr 2019 12:50:25 +0000

Google App Engine is one of my favorite service of GCP.
It makes my application easy to deploy and don't need to worry about the server load.It works well with my Angular/Vue.js SPA applications.

Then I took an error in the knee...

Sorry, I mean I took an error in my App Engine Service.

Error: EROFS: read-only file system, mkdir '/srv/sessions' at Object.mkdirSync (fs.js:752:3) at Object.mkdirsSync

read-only file system ?!?!
All I just want using node-persist. For some small cache files...
Why're you doing this to me !

Here is the reason from App Engine Documents:

In App Engine, the local filesystem that your application is deployed to is not writeable. This behavior ensures the security and scalability of your application.

However, if the application needs to write and read files at runtime, App Engine provides a built-in Google Cloud Storage stream wrapper that allows you to use many of the standard PHP filesystem functions to read and write files in an App Engine PHP app.

1.I'm not a PHPer, and using Google Cloud Storage for just some cache files? NaN...

2.My program works well, I don't want to change it.(Like using Cloud Storage)

3.Using Google Computer Engine and setup server from zero? Who wants to care about the server load?

Then I found a way that it worth to try!

Cloud Run is a managed compute platform that enables you to run stateless containers that are invocable via HTTP requests. Cloud Run is serverless: it abstracts away all infrastructure management, so you can focus on what matters most — building great applications.

Humm, This is what I want.
Put my application into a container. Then upload it to Cloud Run.
It will take care of my container offer flexibility and portability of workloads.

Allright! Let's hack.

1.Create a docker file.I'm using nuxt.js

FROM node:10

WORKDIR /usr/src/app

ENV PORT 8080
ENV HOST 0.0.0.0

COPY package*.json ./

RUN npm install --only=production

COPY . .

RUN npm run build
CMD npm start

2.build docker image from dockerfile.

 docker build ./  -t  gcr.io/project-name/image-name:1.0

3.Push the image to your GCP container registry

docker push gcr.io/project-name/image-name:1.0

4.If success It will look like this.(Sorry for the japanese)

5.Click it, select 「create a service at cloud run」. A few mins, your container will run at GCP.

Okey,
My Cache files works! All my program run as well as my local.
And using container to build micro-services is a good feature.

So, I will say good-bye to the GAE?

Well, GAE is still a very good service for All the time. Like SPA, You can pay more attention at your front-end.

Cloud Run just give me another choice.
To understand what you need. Then you can decide which you need to use.

Using Atomic Design with Nuxt.js and have a great hacking time.

J.Cho — Tue, 16 Apr 2019 14:34:31 +0000

This is my first time write a english post.
I'm a web application developer working in Japan.And yes, I'm a Chinese.XD

What I used in this project

Nuxt.js v2.0
Express v4.0
bootstrap-vue v4.0

What is Atomic Design

In case you don't know what is Atomic Design.
Here are some good documents about it.

http://atomicdesign.bradfrost.com/
https://www.indetail.co.jp/blog/10234/

TL;Dr: It's a design system to show you how to create your UI component exactly you need to use.

How To Separate Your Folder

Atoms Samples

The smallest UI component in your project.
Like this. Just a nuxt-lint, div and img.

<template>
  <div>
    <nuxt-link to="/album">
      <img class="album-image" :src="album.coverUrl" />
    </nuxt-link>
    <div>
      {{ album.title }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    album: {
      type: Object,
      required: true,
      default: null
    }
  }
}
</script>

<style scoped>  <-- Use scoped to make the css only in this component
.album-image {
  height: 175px;
  width: 175px;
  object-fit: cover;
  border-radius: 10px;
  margin: 1px;
}
</style>

molecules

contain some atoms
In my case, I make it to be a array of the atoms

<template>
  <b-row>
    <b-col v-for="album in albums" :key="album.id">
      <Album :album="album"></Album>  <!-- use props in atom to receive the data -->
    </b-col>
  </b-row>
</template>

<script>
import Album from '~/components/atoms/Album.vue'  //  import the atom file

export default {
  components: {
    Album // This is the atom componet
  },

  props: {
    data: {
      type: Object,
      required: true,
      default: () => null
    }
  }
}
</script>

organisms

combine different molecules

<template>
  <section>
    <nav class="navbar navbar-light bg-light">
      <BackBtn path="/activity"></BackBtn>  <--- You can use atom aslo
    </nav>
    <div class="container-fluid">
      <AlbumList :data="albums"></AlbumList>  
      <CommentList :comments="comments"></CommentList>
    </div>
  </section>
</template>

<script>
import BackBtn from '~/components/atoms/BackBtn.vue'
import CommentList from '~/components/molecules/CommentList.vue'
import AlbumList from '~/components/molecules/AlbumList.vue'

export default { 
  components: {
    BackBtn, 
    CommentList, // different molecules
    AlbumList    // some molecules
  }
  data() {
    comments: [
       ... // 
    ]
  },
  computed: {
    albums() {
      return this.$store.state.albums // Using Vuex with Atomic Design is aslo a great idea, you can get your data in different ways.In your atom or your molecules.
    }
  },
}
</script>

Page

Finally, The page.
Make sure your page using less code you need.
If your page is larger you should think about to separate into small things like atom.

<template>
  <section>
    <AlbumBook></AlbumBook>
  </section>
</template>

<script>
import AlbumBook from '~/components/organisms/AlbumBook.vue'

export default {
  components: {
    AlbumBook
  }
}
</script>

At Last

Separate your files, decide which component should be smaller. Maybe is the most challenge thing in your project.
But once you get to the point. you'll get the benefit from it.
Especially in your early development stage.

1.Every time you want to change your component. You don't need to change them all.Just in one file.Any other your page import that file can be changed.

2.Easy for management.Less code you need, Less bugs.

P.S:
This post is what I wrote in my Qiita.(A Japanese Tech blog)
https://qiita.com/jakushin/items/e8b19f6a2c7bcd037573

DEV Community: J.Cho