第12章クラウドネイティブアプリケーション開発

mkdir -p can-node-express && cd can-node-express

npm init -y

npm install express

const express = require('express')
const port = process.env.PORT ǁ 8080
const app = express()
app.use(express.json())
app.listen(port, () => console.log('Sample app is listening on port ${port}!'))

npm i sequelize pg pg-hstore

const Sequelize = require('sequelize')
const sequelize = new
Sequelize('postgres://Student%40<server_name>:Pa55w0rd1234@<server_name>.postgres.database.azure.com:5432/cnainventory)
sequelize
.authenticate()
.then(() => {
  console.log('Connection has been established successfully.');
})
.catch(err => {
  console.error('Unable to connect to the database:', err);
});

const Inventory = sequelize.define('inventory', {
  id: { type: Sequelize.INTEGER, allowNull: false, primaryKey: true },
  name: { type: Sequelize.STRING, allowNull: false },
  quantity: { type: Sequelize.INTEGER },
  date: { type: Sequelize.DATEONLY, defaultValue: Sequelize.NOW }
}, {
  freezeTableName: true,
  timestamps: false
});

app.get('/inventory/:id', async(req, res)=> {
  const id=req.params.id
  try {
const inventory = await Inventory.findAll({
  attributes: ['id', 'name', 'quantity', 'date'],
  where: {
    id: id
  } })
  res.json({ inventory })
} catch(error) {
  console.error(error)
}})

app.post('/inventory', async (req, res) => {
try {
  const newItem = new Inventory(req.body)
  await newItem.save()
  res.json({ inventory: newItem })
} catch(error) {
  Console.error(error)
}})

npx create-next-app

npm install prisma (npm install prisma -save-dev)
npm install @prisma/client

npx prisma init

DATABASE_URL="postgresql://USER_NAME%40SERVER_NAME:PASSWORD@SERVER_NAME.postgres.database.azure.com:5432/cnainventory"

npx prisma generate

import { PrismaClient } from '@prisma/client'

const globalForPrisma = global as unknown as {
prisma: PrismaClient | undefined
}

export const prisma =
globalForPrisma prisma ??
new PrismaClient({
log: ['query'],
})

if(process.env.NODE_ENV !=='production') globalForPrisma.prisma = prisma

import React from "react";

export type InventoryProps = {
  id: string;
  name: string;
  quantity: string;
  date: string;
};

constInventory: React.FC<{ inventoryrec: InventoryProps }>=({
inventoryrec})=> {return(
  <div
  className="flex bg-white shadow-lg rounded-lg mx-2 md:mx-auto mb-5 max-w-2xl"
  >
  <divclassName="flex items-start px-4 py-3">
    <div className="">
      <div className="inline items-center justify-between">
        <p className="text-gray-700 text-sm">
        <strong>ID: {inventoryrec.id}</strong> Name: {inventoryrec.name}
(quantity: {inventoryrec.quantity})
        </p>
        <small className="text-red-700 text-sm">
        Date: {inventoryrec.date.toString().substring(0,10)}
        </small>
      </div>
    </div>
  </div>
</div>
</div>
);
};

export default Inventory;

import React,{ ReactNode } from "react";
import Head from "next/head";

type Props = {
  children: ReactNode;
};

const Layout: React.FC<Props> = (props) => (
  <div>
    <div className="w-full text-center bg-red-800 flex flex-wrap items-center">
      <div className="text-3xl w-1/2 text-white mx-2 md:mx-auto py-5">
        Inventory Data
      </div>
  </div>
  <div className="layout">{props.children}</div>
  <style jsx global>{`
    html {
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    body {
      margin: 0;
      padding: 0;
      font-size: 16px;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
        Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",
        "Segoe UI Symbol";
      background: rgba(0,0,0,0.05);
    }
    input,
    textarea {
      font-size: 16px;
    }
    button {
      cursor: pointer;
    }
  `}</style>
  <style jsx>{`
    .layout {
      padding: 0 2rem;
    }
  `}</style>
  </div>
);

export default Layout;

declare global {
  namespace NodeJS {
    interface Global {
      prisma: any;
    }
  }
}

import { prisma } from '../lib/prisma';
import Inventory,{ InventoryProps } from "../components/Inventory";
import Layout from "../components/Layout"

export const getServerSideProps = async () => {
  const inventoryrecs = await prisma.inventory.findMany({
  })
  return { props: { inventoryrecs: JSON.parse(JSON.stringify(inventoryrecs)) }
}
}

type Props = {
  inventoryrecs: InventoryProps[]
}

// index.tsx
const InventoryFeed: React.FC<Props> = (props) => {
  return (
    <Layout>
      <div className="page">
        <br/>
        <main>
          {props.inventoryrecs.map((inventoryrec) => (
            <div key={inventoryrec.id} className="post">
              <Inventory inventoryrec={inventoryrec} />
            </div>
          ))}
        </main>
      </div>
      <style jsx>{`
        .post:hover {
          box-shadow: 1px 1px 3px #aaa;
        }
        .post + .post {
          margin-top: 2rem;
        }
      `}</style>
    </Layout>
  )
}

export default InventoryFeed