Prepare deploy via serverless

Author: velopert

.env

@@ -1,2 +1,3 @@
 HTTPS=true
-REACT_APP_API_HOST=https://v2.velog.io/
+REACT_APP_API_HOST=https://v2dev.velog.io/graphql
+PUBLIC_URL=https://static.velog.io/

.gitignore

@@ -22,4 +22,10 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-/dist
+/dist
+
+# package directories
+jspm_packages
+
+# Serverless directories
+.serverless

config/env.js

@@ -1,5 +1,3 @@
-'use strict';
-
 const fs = require('fs');
 const path = require('path');
 const paths = require('./paths');
@@ -10,7 +8,7 @@ delete require.cache[require.resolve('./paths')];
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
+    'The NODE_ENV environment variable is required but was not specified.',
   );
 }
 
@@ -35,7 +33,7 @@ dotenvFiles.forEach(dotenvFile => {
     require('dotenv-expand')(
       require('dotenv').config({
         path: dotenvFile,
-      })
+      }),
     );
   }
 });
@@ -77,7 +75,7 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
-      }
+      },
     );
   // Stringify all values so we can feed into Webpack DefinePlugin
   const stringified = {
@@ -87,7 +85,12 @@ function getClientEnvironment(publicUrl) {
     }, {}),
   };
 
-  return { raw, stringified };
+  const stringifiedForServerless = Object.keys(raw).reduce((env, key) => {
+    env[`process.env.${key}`] = JSON.stringify(raw[key]);
+    return env;
+  }, {});
+
+  return { raw, stringified, stringifiedForServerless };
 }
 
 module.exports = getClientEnvironment;

config/paths.js

@@ -82,7 +82,9 @@ module.exports = {
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
   ssrIndexJs: resolveApp('src/index.server.ts'),
+  ssrServerlessEntry: resolveApp('src/serverless.ts'),
   ssrBuild: resolveApp('dist'),
+  ssrServerlessBuild: resolveApp('.webpack'),
 };
 
 module.exports.moduleFileExtensions = moduleFileExtensions;

config/webpack.config.js

@@ -1,5 +1,3 @@
-
-
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');

config/webpack.config.lambda.js renamed to config/webpack.config.serverless.js

@@ -1,3 +1,8 @@
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+process.env.REACT_APP_SSR = 'enabled';
+
+const CopyPlugin = require('copy-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const paths = require('./paths');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
@@ -8,6 +13,7 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 const path = require('path');
+const serverlessWebpack = require('serverless-webpack');
 
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
@@ -17,12 +23,13 @@ const publicUrl = paths.servedPath.slice(0, -1);
 const env = getClientEnvironment(publicUrl);
 
 module.exports = {
-  mode: 'production',
-  entry: paths.ssrIndexJs,
+  mode: serverlessWebpack.lib.webpack.isLocal ? 'development' : 'production',
+  entry: serverlessWebpack.lib.entries,
   target: 'node',
   output: {
-    path: paths.ssrBuild,
-    filename: 'server.js',
+    libraryTarget: 'commonjs2',
+    path: paths.ssrServerlessBuild,
+    filename: '[name].js',
     publicPath: paths.servedPath,
   },
   module: {
@@ -134,12 +141,18 @@ module.exports = {
       .filter(ext => true || !ext.includes('ts')),
   },
   plugins: [
-    new webpack.DefinePlugin(env.stringified),
+    new webpack.DefinePlugin(env.stringifiedForServerless),
     new webpack.NormalModuleReplacementPlugin(
       /codemirror/,
       path.resolve(paths.appSrc, 'lib/replacedModule.ts'),
     ),
     new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+    new CopyPlugin([
+      {
+        from: path.resolve(paths.appBuild, 'loadable-stats.json'),
+        to: 'build',
+      },
+    ]),
   ],
   optimization: {
     minimize: false,

docker/redis/Dockerfile

@@ -0,0 +1,2 @@
+FROM bitnami/redis:5.0
+ENV ALLOW_EMPTY_PASSWORD=yes

package.json

@@ -16,6 +16,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/aws-lambda": "^8.10.39",
     "@types/codemirror": "^0.0.81",
     "@types/date-fns": "^2.6.0",
     "@types/ioredis": "^4.14.3",
@@ -43,6 +44,7 @@
     "@typescript-eslint/eslint-plugin": "^2.8.0",
     "@typescript-eslint/parser": "^2.8.0",
     "apollo-boost": "^0.4.7",
+    "aws-lambda": "^1.0.4",
     "axios": "^0.19.0",
     "babel-eslint": "10.0.3",
     "babel-jest": "^24.9.0",
@@ -52,6 +54,7 @@
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "codemirror": "^5.49.2",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "3.2.0",
     "date-fns": "^2.8.1",
     "dotenv": "8.2.0",
@@ -116,6 +119,7 @@
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.0",
     "semver": "6.3.0",
+    "serverless-webpack": "^5.3.1",
     "snakecase-keys": "^3.1.0",
     "strip-markdown": "^3.1.1",
     "style-loader": "1.0.0",

serverless.yml

@@ -0,0 +1,147 @@
+# Welcome to Serverless!
+#
+# This file is the main config file for your service.
+# It's very minimal at this point and uses default values.
+# You can always add more config options for more control.
+# We've included some commented out config examples here.
+# Just uncomment any of them to get that config option.
+#
+# For full config options, check the docs:
+#    docs.serverless.com
+#
+# Happy Coding!
+
+service: velog-v2-ssr
+
+plugins:
+  - serverless-webpack
+
+# app and org for use with dashboard.serverless.com
+app: velog-v2-ssr
+org: velopert
+
+# You can pin your service to only deploy with a specific Serverless version
+# Check out our docs for more details
+# frameworkVersion: "=X.X.X"
+
+provider:
+  name: aws
+  runtime: nodejs12.x
+  region: ap-northeast-2
+# you can overwrite defaults here
+#  stage: dev
+#  region: us-east-1
+
+# you can add statements to the Lambda function's IAM Role here
+#  iamRoleStatements:
+#    - Effect: "Allow"
+#      Action:
+#        - "s3:ListBucket"
+#      Resource: { "Fn::Join" : ["", ["arn:aws:s3:::", { "Ref" : "ServerlessDeploymentBucket" } ] ]  }
+#    - Effect: "Allow"
+#      Action:
+#        - "s3:PutObject"
+#      Resource:
+#        Fn::Join:
+#          - ""
+#          - - "arn:aws:s3:::"
+#            - "Ref" : "ServerlessDeploymentBucket"
+#            - "/*"
+
+# you can define service wide environment variables here
+  environment:
+    REDIS_HOST: ${ssm:/velog-v2/redis-host}
+    DEBUG: ioredis:*
+
+  vpc:
+    securityGroupIds:
+      - sg-007a5a395dbdcef1f
+      - sg-f588c99d
+      - sg-0fd14591289bb3212
+    subnetIds:
+      - subnet-02c6112f71f5148c7
+      - subnet-0ebc43e6ab298c646
+# you can add packaging information here
+#package:
+#  include:
+#    - include-me.js
+#    - include-me-dir/**
+#  exclude:
+#    - exclude-me.js
+#    - exclude-me-dir/**
+
+# package:
+#   exclude:
+#     - node_modules/**
+
+package:
+  include:
+    - build/loadable-stats.json
+    
+custom:
+  webpack:
+    webpackConfig: './config/webpack.config.serverless.js'
+    includeModules: true
+
+functions:
+  render:
+    handler: src/serverless.handler
+    events:
+      - http:
+          method: ANY
+          path: /
+      - http:
+          method: ANY
+          path: /{any+}
+
+#    The following are a few example events you can configure
+#    NOTE: Please make sure to change your handler code to work with those events
+#    Check the event documentation for details
+#    events:
+#      - http:
+#          path: users/create
+#          method: get
+#      - websocket: $connect
+#      - s3: ${env:BUCKET}
+#      - schedule: rate(10 minutes)
+#      - sns: greeter-topic
+#      - stream: arn:aws:dynamodb:region:XXXXXX:table/foo/stream/1970-01-01T00:00:00.000
+#      - alexaSkill: amzn1.ask.skill.xx-xx-xx-xx
+#      - alexaSmartHome: amzn1.ask.skill.xx-xx-xx-xx
+#      - iot:
+#          sql: "SELECT * FROM 'some_topic'"
+#      - cloudwatchEvent:
+#          event:
+#            source:
+#              - "aws.ec2"
+#            detail-type:
+#              - "EC2 Instance State-change Notification"
+#            detail:
+#              state:
+#                - pending
+#      - cloudwatchLog: '/aws/lambda/hello'
+#      - cognitoUserPool:
+#          pool: MyUserPool
+#          trigger: PreSignUp
+#      - alb:
+#          listenerArn: arn:aws:elasticloadbalancing:us-east-1:XXXXXX:listener/app/my-load-balancer/50dc6c495c0c9188/
+#          priority: 1
+#          conditions:
+#            host: example.com
+#            path: /hello
+
+#    Define function environment variables here
+#    environment:
+#      variable2: value2
+
+# you can add CloudFormation resource templates here
+#resources:
+#  Resources:
+#    NewResource:
+#      Type: AWS::S3::Bucket
+#      Properties:
+#        BucketName: my-new-bucket
+#  Outputs:
+#     NewOutput:
+#       Description: "Description for the output"
+#       Value: "Some output value"

src/index copy.css

@@ -1,7 +1,9 @@
 import Redis from 'ioredis';
 import checkCacheRule from './checkCacheRule';
 
-const redis = new Redis();
+const redis = new Redis({
+  host: process.env.REDIS_HOST || 'locahost',
+});
 
 function createCacheKey(url: string) {
   return `ssr:${url}`;

src/server/CacheManager.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import CacheManager from './CacheManager';
+
+const cacheManager = new CacheManager();
+
+export default async function sampleRender() {
+  const rendered = ReactDOMServer.renderToString(<div>Hello React!</div>);
+  return rendered;
+}

src/server/sampleRender.tsx

@@ -47,7 +47,7 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
   const client = new ApolloClient({
     ssrMode: true,
     link: createHttpLink({
-      uri: 'http://localhost:5000/graphql',
+      uri: 'https://v2dev.velog.io/graphql',
       fetch: fetch as any,
       headers: {
         cookie,
@@ -58,7 +58,10 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
 
   const context = {};
   const sheet = new ServerStyleSheet();
-  const extractor = new ChunkExtractor({ statsFile });
+  const extractor = new ChunkExtractor({
+    statsFile,
+    publicPath: 'https://static.velog.io',
+  });
 
   const Root = (
     <ChunkExtractorManager extractor={extractor}>