Skip to content

Instantly share code, notes, and snippets.

@faermanj

faermanj/README.md

Last active February 25, 2019 11:46
Show Gist options
  • Save faermanj/a096ab300da602f117de6ae39165d491 to your computer and use it in GitHub Desktop.
Save faermanj/a096ab300da602f117de6ae39165d491 to your computer and use it in GitHub Desktop.
Download ZIP
Serverless for Developers - 4YFN 2019
Raw
README.md

Serverless for Developers - 4YFN 2019

Julio Faerman - @faermanj

Before the begining

  • Why AWS? open https://aws.amazon.com/what-is-cloud-computing/

  • Free? open http://aws.amazon.com/free/

  • Serverless? open https://aws.amazon.com/serverless/

  • Cloud9 IDE open https://aws.amazon.com/cloud9/

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
nvm install node
nvm alias default node
npm install -g c9
curl https://pyenv.run | bash
pyenv install 3.7.2
pyenv global 3.7.2

Serverless Compute

open https://aws.amazon.com/lambda/

open https://aws.amazon.com/fargate/

Part 1: AWS Serverless Application Model

open https://aws.amazon.com/serverless/sam/

Benefits of Using AWS SAM

  • Single-deployment configuration
  • Extension of AWS CloudFormation
  • Built-in best practices
  • Local debugging and testing
  • Deep integration with development tools

Bootstrap SAM project

sam init -r python3.7 -n pma-sam-demo
cd pma-sam-demo
c9 open hello_world/app.py
print(json.dumps(event, indent=4, sort_keys=True))
sam build

Local Development

echo '{"hello":"world"}'  | sam local invoke
sam local start-api -p 8080 --host 0.0.0.0
"preview running applications"

Packaging

ARTIFACTS_BUCKET="pma-bucket-bcn"
aws s3 mb s3://$ARTIFACTS_BUCKET
sam package \
    --output-template-file pma.out.yaml \
    --s3-bucket $ARTIFACTS_BUCKET
aws s3 ls s3://$ARTIFACTS_BUCKET
c9 open pma.out.yaml

Deployment

sam deploy \
    --template-file pma.out.yaml \
    --stack-name pma-sam-demo \
    --capabilities CAPABILITY_IAM

open https://console.aws.amazon.com/cloudformation/home

aws cloudformation describe-stacks \
    --stack-name pma-sam-demo \
    --query 'Stacks[].Outputs'

open https://console.aws.amazon.com/apigateway/home

# https://console.aws.amazon.com/lambda/home

# https://console.aws.amazon.com/cloudwatch/home

sam logs -t -n HelloWorldFunction --stack-name pma-sam-demo

Part 2: AWS Amplify

  • Install and setup AWS Amplify CLI npm install -g @aws-amplify/cli # amplify configure

Bootstrap Amplify Project

mkdir -p pma-amp-demo/src && cd pma-amp-demo touch package.json index.html webpack.config.js src/app.js

´´´open https://docs.npmjs.com/files/package.json´´´ ´´´open https://webpack.js.org/´´´

  • c9 open package.json
{
  "name": "pma-demo",
  "version": "1.0.0",
  "description": "Positive Mental Attitude Demonstration",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "copy-webpack-plugin": "^4.5.2",
    "webpack-dev-server": "^3.1.5"
  },
  "scripts": {
    "start": "webpack && webpack-dev-server --mode development",
    "build": "webpack"
  }
}

npm install
  • c9 open index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AWS Amplify</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body { font-family: "Amazon Ember", "Helvetica", "sans-serif"; margin: 0; }
            a { color: #FF9900; }
            h1 { font-weight: 300; }
            .app { width: 100%; }
            .app-header { color: white; text-align: center; background: linear-gradient(30deg, #f90 55%, #FFC300); width: 100%; margin: 0 0 1em 0; padding: 3em 0 3em 0; box-shadow: 1px 2px 4px rgba(0, 0, 0, .3); }
            .app-logo { width: 126px; margin: 0 auto; }
            .app-body { width: 400px; margin: 0 auto; text-align: center; }
            .app-body button { background-color: #FF9900; font-size: 14px; color: white; text-transform: uppercase; padding: 1em; border: none; }
            .app-body button:hover { opacity: 0.8; }
        </style>
    </head>
    <body>
        <div class="app">
            <div class="app-header">
                <div class="app-logo">
                    <img src="https://aws-amplify.github.io/images/Logos/Amplify-Logo-White.svg" alt="AWS Amplify" />
                </div>
                <h1>Welcome to AWS Amplify</h1>
            </div>
        </div>
        <script src="main.bundle.js"></script>
    </body>
</html>
  • c9 open webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        overlay: true,
        hot: true,
        port: 8080,
        host: '0.0.0.0'
    },
    plugins: [
        new CopyWebpackPlugin(['index.html']),
        new webpack.HotModuleReplacementPlugin()
    ]
};

Local Development

npm start

Cloud Deployment

npm install --save aws-amplify

amplify init

amplify add hosting

amplify publish

Analytics Demo

amplify add analytics

c9 open ./src/aws-exports.js
  • c9 open index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AWS Amplify</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body { font-family: "Amazon Ember", "Helvetica", "sans-serif"; margin: 0; }
            a { color: #FF9900; }
            h1 { font-weight: 300; }
            .app { width: 100%; }
            .app-header { color: white; text-align: center; background: linear-gradient(30deg, #f90 55%, #FFC300); width: 100%; margin: 0 0 1em 0; padding: 3em 0 3em 0; box-shadow: 1px 2px 4px rgba(0, 0, 0, .3); }
            .app-logo { width: 126px; margin: 0 auto; }
            .app-body { width: 400px; margin: 0 auto; text-align: center; }
            .app-body button { background-color: #FF9900; font-size: 14px; color: white; text-transform: uppercase; padding: 1em; border: none; }
            .app-body button:hover { opacity: 0.8; }
        </style>
    </head>
    <body>
        <div class="app">
            <div class="app-header">
                <div class="app-logo">
                    <img src="https://aws-amplify.github.io/images/Logos/Amplify-Logo-White.svg" alt="AWS Amplify" />
                </div>
                <h1>Welcome to AWS Amplify</h1>
            </div>
            <!-- Register an Pinpoint Event -->
            <div class="app-body">
                <button id="AnalyticsEventButton">Generate Analytics Event</button>
                <div id="AnalyticsResult"></div>
            </div>
        </div>
        <script src="main.bundle.js"></script>
    </body>
</html>

c9 open ./src/app.js

import Auth from '@aws-amplify/auth';
import Analytics from '@aws-amplify/analytics';

import awsconfig from './aws-exports';

// retrieve temporary AWS credentials and sign requests
Auth.configure(awsconfig);
// send analytics events to Amazon Pinpoint
Analytics.configure(awsconfig);

const AnalyticsResult = document.getElementById('AnalyticsResult');
const AnalyticsEventButton = document.getElementById('AnalyticsEventButton');
let EventsSent = 0;
AnalyticsEventButton.addEventListener('click', (evt) => {
    Analytics.record('AWS Amplify Tutorial Event')
        .then( (evt) => {
            const url = 'https://'+awsconfig.aws_project_region+'.console.aws.amazon.com/pinpoint/home/?region='+awsconfig.aws_project_region+'#/apps/'+awsconfig.aws_mobile_analytics_app_id+'/analytics/events';
            AnalyticsResult.innerHTML = '<p>Event Submitted.</p>';
            AnalyticsResult.innerHTML += '<p>Events sent: '+(++EventsSent)+'</p>';
            AnalyticsResult.innerHTML += '<a href="'+url+'" target="_blank">View Events on the Amazon Pinpoint Console</a>';
        });
});

amplify publish

amplify status

open https://console.aws.amazon.com/pinpoint/home

Part 3: AWS CodeStar

open https://console.aws.amazon.com/codestar/home

Closure

About

https://aws.amazon.com/developer/community/evangelists/julio-faerman/

https://twitter.com/faermanj

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment