<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ぎゃばん</title>
    <description>The latest articles on DEV Community by ぎゃばん (@ledsun).</description>
    <link>https://dev.to/ledsun</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F53176%2F5381845a-68e1-47e8-9a71-92b112d42ede.jpg</url>
      <title>DEV Community: ぎゃばん</title>
      <link>https://dev.to/ledsun</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ledsun"/>
    <language>en</language>
    <item>
      <title>Amazon Linux 2でHeadless Chromeを動かす</title>
      <dc:creator>ぎゃばん</dc:creator>
      <pubDate>Wed, 10 Jan 2018 06:30:22 +0000</pubDate>
      <link>https://dev.to/ledsun/amazon-linux-2headless-chrome-2b97</link>
      <guid>https://dev.to/ledsun/amazon-linux-2headless-chrome-2b97</guid>
      <description>

&lt;p&gt;Amazon Linuxでは、GUI向けのパッケージが提供されていませんでした。Headless Chromeはlibgtk3に依存しており、Amazon Linuxにlibgtk3をインストールするのに大変な手間が必要でした。 Amazon Linux 2になり、GUI向けのパッケージが提供され、Red Hat Enterprise Linux 7.4とほとんど変わらない手順でHeadless Chromeを動かせるようになりました。&lt;/p&gt;

&lt;p&gt;Amazon Linux 2にHeadless Chromeをインストールしてみましょう。&lt;/p&gt;

&lt;h2&gt;
  
  
  EC2インスタンス 作成
&lt;/h2&gt;

&lt;p&gt;Amazon Linux 2でAWS EC2インスタンスを作成します。&lt;/p&gt;

&lt;h3&gt;
  
  
  事前条件
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://aws.amazon.com/jp/cli/"&gt;AWSコマンド&lt;/a&gt;の設定が終わっているものとします。&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;キーペア &lt;code&gt;chromium-on-amazon-linux2&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;SSH接続可能なセキュリティグループ &lt;code&gt;sg-77d46f0e&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;があるとします。&lt;/p&gt;

&lt;h2&gt;
  
  
  EC2インスタンス 作成
&lt;/h2&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;aws ec2 run-instances --image-id ami-2a34b64c --count 1 --instance-type t2.micro --key-name chromium-on-amazon-linux2 --security-group-ids sg-77d46f0e
{
    "Groups": [],
    "Instances": [
        {
            "AmiLaunchIndex": 0,
            "ImageId": "ami-2a34b64c",
            "InstanceId": "i-0f3efae9b9002b82e",
            "InstanceType": "t2.micro",
            "KeyName": "chromium-on-amazon-linux2",
            "LaunchTime": "2018-01-10T06:11:19.000Z",
            "Monitoring": {
                "State": "disabled"
            },
            "Placement": {
                "AvailabilityZone": "ap-northeast-1a",
                "GroupName": "",
                "Tenancy": "default"
            },
            "PrivateDnsName": "ip-172-31-6-102.ap-northeast-1.compute.internal",
            "PrivateIpAddress": "172.31.6.102",
            "ProductCodes": [],
            "PublicDnsName": "",
            "State": {
                "Code": 0,
                "Name": "pending"
            },
            "StateTransitionReason": "",
            "SubnetId": "subnet-6bca3b1c",
            "VpcId": "vpc-4c30c129",
            "Architecture": "x86_64",
            "BlockDeviceMappings": [],
            "ClientToken": "",
            "EbsOptimized": false,
            "Hypervisor": "xen",
            "NetworkInterfaces": [
                {
                    "Attachment": {
                        "AttachTime": "2018-01-10T06:11:19.000Z",
                        "AttachmentId": "eni-attach-a2db2748",
                        "DeleteOnTermination": true,
                        "DeviceIndex": 0,
                        "Status": "attaching"
                    },
                    "Description": "",
                    "Groups": [
                        {
                            "GroupName": "launch-wizard-1",
                            "GroupId": "sg-77d46f0e"
                        }
                    ],
                    "Ipv6Addresses": [],
                    "MacAddress": "06:31:39:4b:07:38",
                    "NetworkInterfaceId": "eni-e98d92d5",
                    "OwnerId": "016753510962",
                    "PrivateDnsName": "ip-172-31-6-102.ap-northeast-1.compute.internal",
                    "PrivateIpAddress": "172.31.6.102",
                    "PrivateIpAddresses": [
                        {
                            "Primary": true,
                            "PrivateDnsName": "ip-172-31-6-102.ap-northeast-1.compute.internal",
                            "PrivateIpAddress": "172.31.6.102"
                        }
                    ],
                    "SourceDestCheck": true,
                    "Status": "in-use",
                    "SubnetId": "subnet-6bca3b1c",
                    "VpcId": "vpc-4c30c129"
                }
            ],
            "RootDeviceName": "/dev/xvda",
            "RootDeviceType": "ebs",
            "SecurityGroups": [
                {
                    "GroupName": "launch-wizard-1",
                    "GroupId": "sg-77d46f0e"
                }
            ],
            "SourceDestCheck": true,
            "StateReason": {
                "Code": "pending",
                "Message": "pending"
            },
            "VirtualizationType": "hvm"
        }
    ],
    "OwnerId": "016753510962",
    "ReservationId": "r-0d34db4dcac25c65f"
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;次に生成されたEC2インスタンスにSSHでログインします。&lt;/p&gt;

&lt;h3&gt;
  
  
  SSH ログイン
&lt;/h3&gt;

&lt;p&gt;PublicIpAddressはEC2インスタンス生成と同時には取得できません。&lt;br&gt;
&lt;code&gt;InstanceId&lt;/code&gt;の値を使って、PublicIpAddressを取得します。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;aws ec2 describe-instances --instance-ids i-0f3efae9b9002b82e
{
    "Reservations": [
        {
            "Groups": [],
            "Instances": [
                {
                    "AmiLaunchIndex": 0,
                    "ImageId": "ami-2a34b64c",
                    "InstanceId": "i-0f3efae9b9002b82e",
                    "InstanceType": "t2.micro",
                    "KeyName": "chromium-on-amazon-linux2",
                    "LaunchTime": "2018-01-10T06:11:19.000Z",
                    "Monitoring": {
                        "State": "disabled"
                    },
                    "Placement": {
                        "AvailabilityZone": "ap-northeast-1a",
                        "GroupName": "",
                        "Tenancy": "default"
                    },
                    "PrivateDnsName": "ip-172-31-6-102.ap-northeast-1.compute.internal",
                    "PrivateIpAddress": "172.31.6.102",
                    "ProductCodes": [],
                    "PublicDnsName": "ec2-13-230-156-244.ap-northeast-1.compute.amazonaws.com",
                    "PublicIpAddress": "13.230.156.244",
                    "State": {
                        "Code": 16,
                        "Name": "running"
                    },
                    "StateTransitionReason": "",
                    "SubnetId": "subnet-6bca3b1c",
                    "VpcId": "vpc-4c30c129",
                    "Architecture": "x86_64",
                    "BlockDeviceMappings": [
                        {
                            "DeviceName": "/dev/xvda",
                            "Ebs": {
                                "AttachTime": "2018-01-10T06:11:20.000Z",
                                "DeleteOnTermination": true,
                                "Status": "attached",
                                "VolumeId": "vol-068a21bf8110a0b90"
                            }
                        }
                    ],
                    "ClientToken": "",
                    "EbsOptimized": false,
                    "EnaSupport": true,
                    "Hypervisor": "xen",
                    "NetworkInterfaces": [
                        {
                            "Association": {
                                "IpOwnerId": "amazon",
                                "PublicDnsName": "ec2-13-230-156-244.ap-northeast-1.compute.amazonaws.com",
                                "PublicIp": "13.230.156.244"
                            },
                            "Attachment": {
                                "AttachTime": "2018-01-10T06:11:19.000Z",
                                "AttachmentId": "eni-attach-a2db2748",
                                "DeleteOnTermination": true,
                                "DeviceIndex": 0,
                                "Status": "attached"
                            },
                            "Description": "",
                            "Groups": [
                                {
                                    "GroupName": "launch-wizard-1",
                                    "GroupId": "sg-77d46f0e"
                                }
                            ],
                            "Ipv6Addresses": [],
                            "MacAddress": "06:31:39:4b:07:38",
                            "NetworkInterfaceId": "eni-e98d92d5",
                            "OwnerId": "016753510962",
                            "PrivateDnsName": "ip-172-31-6-102.ap-northeast-1.compute.internal",
                            "PrivateIpAddress": "172.31.6.102",
                            "PrivateIpAddresses": [
                                {
                                    "Association": {
                                        "IpOwnerId": "amazon",
                                        "PublicDnsName": "ec2-13-230-156-244.ap-northeast-1.compute.amazonaws.com",
                                        "PublicIp": "13.230.156.244"
                                    },
                                    "Primary": true,
                                    "PrivateDnsName": "ip-172-31-6-102.ap-northeast-1.compute.internal",
                                    "PrivateIpAddress": "172.31.6.102"
                                }
                            ],
                            "SourceDestCheck": true,
                            "Status": "in-use",
                            "SubnetId": "subnet-6bca3b1c",
                            "VpcId": "vpc-4c30c129"
                        }
                    ],
                    "RootDeviceName": "/dev/xvda",
                    "RootDeviceType": "ebs",
                    "SecurityGroups": [
                        {
                            "GroupName": "launch-wizard-1",
                            "GroupId": "sg-77d46f0e"
                        }
                    ],
                    "SourceDestCheck": true,
                    "VirtualizationType": "hvm"
                }
            ],
            "OwnerId": "016753510962",
            "ReservationId": "r-0d34db4dcac25c65f"
        }
    ]
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ssh -i chromium-on-amazon-linux2.pem ec2-user@13.230.156.244
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  依存パッケージインストール
&lt;/h2&gt;

&lt;p&gt;yumパッケージを更新します。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo yum update -y
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Chromiumが依存するパッケージをインストールします。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;この部分が今までのAmazon Linuxで実現しようとすると、大変な手間が掛かっていました。Amazon Linux 2では設定なしで、yumコマンドでインストールできます。&lt;br&gt;
参考：&lt;a href="https://intoli.com/blog/installing-google-chrome-on-centos/"&gt;Installing Google Chrome On CentOS, Amazon Linux, or RHEL&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Chromiumインストール
&lt;/h2&gt;

&lt;p&gt;ここから少しズルをします。&lt;br&gt;
&lt;a href="https://github.com/GoogleChrome/puppeteer"&gt;GoogleChrome/puppeteer: Headless Chrome Node API&lt;/a&gt;はインストール時に、自動的にChromiumのバイナリをダウンロードします。&lt;br&gt;
これを使います。&lt;/p&gt;

&lt;h3&gt;
  
  
  Node.jsインストール
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
sudo yum -y install nodejs
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  puppeteerインストール
&lt;/h3&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm init -y
npm i puppeteer
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h2&gt;
  
  
  動作確認
&lt;/h2&gt;

&lt;p&gt;次の内容のindex.jsを作ります。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;puppeteer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'puppeteer'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;browser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;puppeteer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;launch&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;browser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;newPage&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kr"&gt;goto&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'https://example.com'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="c1"&gt;// Get the "viewport" of the page, as reported by the page.&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dimensions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;page&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;evaluate&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;documentElement&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clientWidth&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;documentElement&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;clientHeight&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;deviceScaleFactor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;devicePixelRatio&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'Dimensions:'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;dimensions&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kr"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;browser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;close&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;})();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;node .
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;で、実行します。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Dimensions: { width: 800, height: 600, deviceScaleFactor: 1 }
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;が表示されれば成功です！！&lt;/p&gt;

&lt;h2&gt;
  
  
  後始末
&lt;/h2&gt;

&lt;p&gt;使い終わったEC2インスタンスを削除します。&lt;/p&gt;



&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;aws ec2 terminate-instances --instance-ids i-0f3efae9b9002b82e
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;




</description>
      <category>amazonlinux2</category>
    </item>
  </channel>
</rss>
