WordPress with CloudFront + AMAZON RDS + S3

#Creating JIN-KEI Simple Stack
- List of commands on this hands-on
https://github.com/amimoto-ami/hans-on-materials/blob/master/howto/simple-stack_en.md

Transcript

1. WordPress
   with
   CloudFront + AMAZON RDS + S3
   @Amimoto_Ami
   amimoto-ami.com
   

   View Slide

2. Architecture
   

   View Slide

3. AMAZON CloudFront
   AMAZON RDS
   AMAZON S3
   w %#XJUIIJHIGBJMVSFUPMFSBODF
   w TQFFEVQDPOUFOUTEFMJWFSZXJUI$%/
   w $PTUF⒎FDUJWFNFEJBTUPSBHFT
   (PBM
   

   View Slide

4. Starting up AWS services
   Plugins configurations
   Workflow
   Preparations
   

   View Slide

5. Preparations
   for
   construction
   

   View Slide

6. http://bit.ly/1Xio3cC
   -JTUPGDPNNBOET
   

   View Slide

7. AWS CLI installation
   CloudFront corresponding
   Workflow
   Start up AMIMOTO AMI
   preparations
   

   View Slide

8. AWS CLI installation
   CloudFront corresponding
   Workflow
   Start up AMIMOTO AMI
   preparations
   

   View Slide

9. https://aws.amazon.com/marketplace/pp/B01DAONMCK/
   

   View Slide

10. When you start up AMIMOTO, 

    step forward until this “Welcome” page.
    

    View Slide

11. AWS CLI installation
    CloudFront corresponding
    Workflow
    Start up AMIMOTO AMI
    preparations
    

    View Slide

12. AWS CLI
    w $PNNBOE-JOF*OUFSGBDFGPS"84
    w :PVDBONBOJQVMBUFBMMUISPVHI
    DPNNBOEMJOF
    w 'PSDPOpHVSFUIF$MPVE'SPOU
    "84$-*
    

    View Slide

13. Create IAM user
    Initial setup
    Workflow
    AWS-CLI installation
    

    View Slide

14. Create IAM user
    Initial setup
    Workflow
    AWS-CLI installation
    

    View Slide

15. 1. Install AWS Command Line Interface (aws-cli) to your Mac or PC

    

    Two ways to install aws-cli:

    - Install follow the AWS user guide page:

    http://docs.aws.amazon.com/cli/latest/userguide/installing.html

    

    - Install through package manager Homebrew, if you use Mac:

    http://brew.sh/index.html

    "84$-*JOTUBMMBUJPO
    

    View Slide

16. Copy below command and pate into your terminal.app then hit [return] key

    $ /usr/bin/ruby -e "$(curl -fsSL https://
    raw.githubusercontent.com/Homebrew/install/
    master/install)"

    $ brew install wget

    $ brew install awscli

    'PS.BDVTFST
    

    View Slide

17. 'PS8JOEPXTVTFS
    w %PXOMPBEUIF"84$-*.4*JOTUBMMFSGPS8JOEPXT CJU
    
    IUUQTTBNB[POBXTDPNBXTDMJ"84$-*NTJ
    w %PXOMPBEUIF"84$-*.4*JOTUBMMFSGPS8JOEPXT CJU
    
    IUUQTTBNB[POBXTDPNBXTDMJ"84$-*NTJ
    

    View Slide

18. Create IAM user
    Initial setup
    Workflow
    AWS-CLI installation
    

    View Slide

19. View Slide

20. move to Identity and Access Management
    

    View Slide

21. Create new user
    

    View Slide

22. Enter a user name and generate access key.
    BNJNPUPDMJ
    BNJNPUPDMJ
    

    View Slide

23. Save security credentials to your local (anywhere you want)
    

    View Slide

24. Attach policy to created user
    

    View Slide

25. Choose CloudFrontFullAccess and…
    

    View Slide

26. Choose AmazonS3FullAccess then click [Attach Policy]
    

    View Slide

27. Two policies are attached to the user
    

    View Slide

28. Create IAM user
    Initial setup
    Workflow
    AWS-CLI installation
    

    View Slide

29. aws configure --profile amimoto-cli
    

    View Slide

30. 4BNQMFDPOpHVSBUJPO
    AWS Access Key ID [None]: XXXXXXXXXXXXXXXXXXXX

    AWS Secret Access Key [None]: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Default region name [None]: ap-northeast-1

    Default output format [None]: JSON
    

    View Slide

31. AWS Access Key ID and AWS Secret Access Key
    

    View Slide

32. 4BNQMFDPOpHVSBUJPO
    AWS Access Key ID [None]: XXXXXXXXXXXXXXXXXXXX

    AWS Secret Access Key [None]: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Default region name [None]: ap-northeast-1

    Default output format [None]: JSON
    

    View Slide

33. AWS CLI installation
    CloudFront corresponding
    Workflow
    Start up AMIMOTO AMI
    preparations
    

    View Slide

34. aws --profile amimoto-cli configure set preview.cloudfront true
    $POpHVSBUJPODPNNBOE
    

    View Slide

35. aws --profile amimoto-cli cloudfront help
    $POpHVSBUJPODIFDL
    

    View Slide

36. View Slide

37. Setting up 

    AWS services
    

    View Slide

38. Amazon RDS
    Amazon S3
    Workflow
    CloudFront
    

    View Slide

39. Amazon RDS
    Amazon S3
    Workflow
    CloudFront
    

    View Slide

40. AMAZON CloudFront
    •Global content delivery network
    (CDN) service
    •High data transfer speeds and
    reduce server load
    •Supports failover if a failure
    

    View Slide

41. export origin_url='{ORIGIN URL}'; aws
    --profile amimoto-cli cloudfront
    create-distribution --cli-input-json
    "$(curl -l -s https://
    raw.githubusercontent.com/amimoto-
    ami/create-cf-dist-settings/master/
    source_dist_setting.sh | sh)"
    4FUUJOH$MPVE'SPOUVQXJUI"84$-*
    

    View Slide

42. http://bit.ly/1VAnJ8q
    -JTUPGDPNNBOET
    

    View Slide

43. • Install WordPress into the server’s document root directory;
    • Replace {ORIGIN URL} to the server domain name (or Public DNS) of AMIMOTO;
    • Change amimoto-cli to your created profile, if necessary;
    • On this hands-on, set
    Public DNS of EC2 to {ORIGIN URL}
    /PUF
    

    View Slide

44. *GZPVDBOOPUpOE1VCMJD%/4PO&$
    Check following documents:
    Updating DNS Support for Your VPC
    http://docs.aws.amazon.com/AmazonVPC/latest/UserGuide/vpc-
    dns.html#vpc-dns-updating
    or
    AWSͰPublic DNS(ύϒϦοΫDNS)ׂ͕Γ౰ͯΒΕͳ͍࣌ͷղܾ๏
    http://qiita.com/kasokai/items/4ea689ce9f206e78a523
    

    View Slide

45. FYQPSUPSJHJO@VSMbFD99999999BQ
    OPSUIFBTUDPNQVUFBNB[POBXTDPN`
    BXTŠQSPpMFBNJNPUPDMJDMPVEGSPOUDSFBUFEJTUSJCVUJPODMJ
    JOQVUKTPO DVSMMTIUUQTSBXHJUIVCVTFSDPOUFOUDPN
    BNJNPUPBNJDSFBUFDGEJTUTFUUJOHTNBTUFS
    TPVSDF@EJTU@TFUUJOHTIcTI
    
    4BNQMFDPOpHVSBUJPO
    

    View Slide

46. View Slide

47. 20-30 minutes to complete for 

    CloudFront starts up
    

    View Slide

48. Amazon S3
    Amazon RDS
    Workflow
    CloudFront
    

    View Slide

49. AMAZON S3
    •AWS storage service
    •Data is stored on redundant servers 

    in multiple data centres
    •High fault tolerance
    •No limit on the number of items 

    can be stored •
    

    View Slide

50. Click S3 on AWS Console page.
    

    View Slide

51. Create a bucket
    

    View Slide

52. Name a bucket; unique and easy to specify
    

    View Slide

53. Bucket properties
    

    View Slide

54. Copy Endpoint and paste it to the text file.
    

    View Slide

55. Choose Enable website hosting
    

    View Slide

56. Input index.html into Index Document
    

    View Slide

57. Click [Save] to apply settings.
    

    View Slide

58. Amazon S3
    Amazon RDS
    Workflow
    CloudFront
    

    View Slide

59. AMAZON RDS
    •Managed DB service
    •Single click to change specification
    •Easy to replication
    

    View Slide

60. AMAZON RDS
    MariaDB
    Amazon Aurora
    Various DB engine
    MySQL
    

    View Slide

61. Switching DB to RDS
    Workflow
    Set up
    

    View Slide

62. Switching DB to RDS
    Workflow
    Set up
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Values to input
    • DB Instance IdentifierɿName of DB instance
    • Master UsernameɿRoot user of DB
    • Master PasswordɿPassword for root user of DB
    • Confirm PasswordɿConfirmation password for root user of DB
    Copy and paste them to notepad and save as text file.
    

    View Slide

68. View Slide

69. )PTUOBNFPG
    EBUBCBTF
    

    View Slide

70. View Slide

71. View Slide

72. Coffee break
    

    View Slide

73. View Slide

74. %BUBCBTF63-
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. Switching DB to RDS
    Workflow
    Set up
    

    View Slide

79. &EJUMPDBMDPOpHQIQ
    $ sudo su -
    # cd /var/www/vhosts/{INSTANCE_ID}
    # vim local-config.php
    

    View Slide

80. Needs to edit (Line: 11–18)
    if ( !$db_data ) {
    $db_data = array(
    'database' => '{Database Name}',
    'username' => '{Master Username}',
    'password' => '{Master Password}',
    'host' => '{RDS_ENDPOINT}',
    );
    }
    

    View Slide

81. Access to CloudFront’s DNS with your browser
    

    View Slide

82. Back to WordPress’ set up page.
    Fill in required field then install WordPress.
    

    View Slide

83. Installation has completed
    

    View Slide

84. Stop MySQL on AMIMOTO(EC2)
    

    View Slide

85. # vim /opt/local/amimoto.json
    

    View Slide

86. Disable MySQL autostart
    • Before
    {
    "mod_php7" : { "enabled": true },
    "run_list" : [ "recipe[amimoto]" ]
    }
    • After
    {
    "mod_php7" : { "enabled": true },
    "mysql": { "enabled": false },
    "run_list" : [ "recipe[amimoto]" ]
    }
    

    View Slide

87. # /opt/local/provision
    

    View Slide

88. Error Establishing a Database Connection
    • local-config.php still refers to previous DB in EC2 (AMIMOTO)
    • Make sure configuration of local-config.php
    

    View Slide

89. Set up plugins
    for WordPress
    

    View Slide

90. C3 CloudFront Cache Clear
    CF Preview Fix
    Plugins
    Nephila clavata
    

    View Slide

91. CF Preview Fix
    C3 CloudFront Cache Clear
    Nephila clavata
    Plugins
    

    View Slide

92. Activate Nephila clavata plugin on WordPress Dashboard
    

    View Slide

93. Configure the plugin
    

    View Slide

94. Values to input
    • AWS Access Key: Access key for IAM user amimoto-s3
    • AWS Secret Key: Access key for IAM user amimoto-s3
    • AWS Region: Region (optional)
    • S3 Bucket: S3 bucket name
    • S3 URL: S3 bucket URL
    • Storage Class: Choose STANDARD
    

    View Slide

95. Media library copied onto Amazon S3
    

    View Slide

96. CF Preview Fix
    C3 CloudFront Cache Clear
    Plugins
    Nephila clavata
    

    View Slide

97. $$MPVE'SPOU$MFBS$BDIF
    • CloudFront͸Ωϟογϡ࡟আ࣌ʹ՝
    ۚ͞ΕΔͷͰཁ஫ҙ
    • Flush CloudFront Cache on
    WordPress
    • Flush automatically when article
    published/updated or manually
    • Pay as each request for invalidation
    

    View Slide

98. Configure the plugin
    $ cd /var/www/vhosts/{INSTANCE_ID}
    $ wp plugin activate c3-cloudfront-clear-cache
    $ wp c3 update distribution_id
    $ wp c3 update access_key
    $ wp c3 update secret_key
    

    View Slide

99. View Slide

100. CF Preview Fix
     C3 CloudFront Cache Clear
     Plugins
     Nephila clavata
     

     View Slide

101. Install and activate [CF Preview Fix] plugin
     

     View Slide

102. Removing
     resources
     

     View Slide

103. AMAZON CloudFront
     Disable CloudFront
     

     View Slide

104. View Slide

105. View Slide

106. AMAZON RDS
     Delete Amazon RDS
     

     View Slide

107. View Slide

108. View Slide

109. AMAZON S3
     Delete Amazon S3
     

     View Slide

110. View Slide

111. %FMFUF4CVDLFU
     • All media are removed permanently
     • Someone will create same S3 bucket name
     

     View Slide

112. IAM
     Delete the created 

     IAM user
     

     View Slide

113. View Slide

114. View Slide

115. AMAZON CloudFront
     Delete CloudFront
     

     View Slide

116. View Slide

117. View Slide

118. Never forget
     delete EC2
     

     View Slide

119. http://amimoto-ami.com/slack/
     Feel free to contact us!
     

     View Slide

120. @Amimoto_Ami
     amimoto-ami.com
     THANK YOU!
     WordPress
     with
     CloudFront + AMAZON RDS + S3
     

     View Slide