<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.3">Jekyll</generator><link href="https://shell845.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://shell845.github.io/" rel="alternate" type="text/html" /><updated>2023-03-28T01:41:41+00:00</updated><id>https://shell845.github.io/feed.xml</id><title type="html">Shell845</title><subtitle>Keep learning</subtitle><entry><title type="html">Interview 101</title><link href="https://shell845.github.io/Interview-101/" rel="alternate" type="text/html" title="Interview 101" /><published>2021-02-28T00:00:00+00:00</published><updated>2021-02-28T00:00:00+00:00</updated><id>https://shell845.github.io/Interview-101</id><content type="html" xml:base="https://shell845.github.io/Interview-101/">&lt;p&gt;My summary of interview preparation.&lt;/p&gt;

&lt;h3 id=&quot;table-of-contents&quot;&gt;Table of contents&lt;/h3&gt;

&lt;p&gt;&lt;a href=&quot;#Behavioral-Interview&quot;&gt;Behavioral Interview&lt;/a&gt;&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;How to organize answers&lt;/li&gt;
  &lt;li&gt;How to talk about projects&lt;/li&gt;
  &lt;li&gt;FABQ&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href=&quot;#Technical-Interview-Preparation-Materials&quot;&gt;Technical Interview Preparation Materials&lt;/a&gt;&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&quot;behavioral-interview&quot;&gt;Behavioral Interview&lt;/h2&gt;

&lt;h3 id=&quot;1-how-to-organize-answers&quot;&gt;1. How to organize answers&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;strong&gt;STAR&lt;/strong&gt;: Situation → Task → Action → Result&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;CARL&lt;/strong&gt;: Context → Action → Result → Learning&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;CART&lt;/strong&gt;: Clarify → Assumption → Result → Test (to solve tech problem / case study)&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;SWOT&lt;/strong&gt;: Strengths, Weaknesses, Opportunities, Threats&lt;/li&gt;
  &lt;li&gt;Mention memorable highlights for interviewers’ follow up questions&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;2-how-to-talk-about-projects&quot;&gt;2. How to talk about projects&lt;/h3&gt;

&lt;p&gt;Include process, domain, structure/tools in your answer.&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Project background (1 min - you should have an overview of the full picture):
    &lt;ul&gt;
      &lt;li&gt;client, industry, business&lt;/li&gt;
      &lt;li&gt;challenge (should be industrial recognized), existing situation (problem)&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Project detail (3 min):
    &lt;ul&gt;
      &lt;li&gt;include scope, deliverables, duration, team structure, report what report to who (knowledge in project management level)&lt;/li&gt;
      &lt;li&gt;mention SDLC flow and process. plus: business input? data source? stakeholders’ requirements? etc&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Project and performance evaluation (users, managements, teammates) (1 min)&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;Ask interviewers if any specific parts they want to know more&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;   Examples

   e.g. the project is to deliver a report: 
      1. report usage/purpose; 
      2. how frequent it generated;
      3. data sources;
      4. what does the report looks like (summary? chart? dashboard? ); 
      5. KPI

   e.g. the project is to build a system: 
      1. system purpose; 
      2. data volume and user numbers of the system; 
      3. overview of infrastructure design (e.g the infra is web server  → MQ → app server → DB, how the design achieve high available and scaling etc); 
      4. detail implementation → your greatest contributions
      5. Project and performance evaluation (users, managements, teammates) (1 min)
      6. Ask interviewers if any specific parts they want to know more
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;3-fabq&quot;&gt;3. FABQ&lt;/h3&gt;

&lt;h4 id=&quot;tell-me-about-your-self-&quot;&gt;Tell me about your self? **&lt;/h4&gt;
&lt;p&gt;Answer structure: &lt;strong&gt;Present → Past → Future&lt;/strong&gt; + Mention &lt;strong&gt;Highlight Points&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
  &lt;li&gt;Who I am (1 min)
    &lt;ul&gt;
      &lt;li&gt;my current role (present)&lt;/li&gt;
      &lt;li&gt;my prior experience / how I come to current position (past)&lt;/li&gt;
      &lt;li&gt;my expectation (future)&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Recent achievement (1 min)
    &lt;ul&gt;
      &lt;li&gt;any highlight points in my projects / any special things I did&lt;/li&gt;
      &lt;li&gt;anything makes me unique&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Personal interests if the interest is work related (30 sec)
    &lt;ul&gt;
      &lt;li&gt;e.g. enjoy writing tech blogs in spare time&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;what-are-your-career-goals-&quot;&gt;What are your career goals? **&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Short-term goals (2 - 3 years)&lt;/li&gt;
  &lt;li&gt;Long-term (5 - 10 years)&lt;/li&gt;
  &lt;li&gt;What actions I am taking to achieve my goals.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;why-you-are-a-good-fit-for-this-role&quot;&gt;Why you are a good fit for this role?&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;What can I bring to the role (50%)&lt;/li&gt;
  &lt;li&gt;What I want to get from this role (30%)&lt;/li&gt;
  &lt;li&gt;What makes me unique (20%)&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;why-are-you-interested-in-this-role--why-do-you-want-to-work-here-&quot;&gt;Why are you interested in this role / Why do you want to work here? **&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Company (e.g. culture, future potential, industry, etc)&lt;/li&gt;
  &lt;li&gt;Role (what I am interested in for this role)&lt;/li&gt;
  &lt;li&gt;My experience/education/background fit the role/company
Notes: Growth mindset, focus on the role, show enthusiasm&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;example-of-successes-&quot;&gt;Example of successes **&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;define &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;success&lt;/code&gt; (e.g. did sth above and beyond your level)&lt;/li&gt;
  &lt;li&gt;provide the success example, organize in STAR format&lt;/li&gt;
  &lt;li&gt;summary: what did you learn from this experience&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;example-of-failure-&quot;&gt;Example of failure **&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Define &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;failure&lt;/code&gt; (e.g. over-promising but under-delivery)&lt;/li&gt;
  &lt;li&gt;Share the example in Context → Action → Result → Learning format. Only need &lt;strong&gt;1&lt;/strong&gt; thing to go wrong and show only &lt;strong&gt;one-time&lt;/strong&gt; mistake (avoid everything wrong or repeating wrong pattern)&lt;/li&gt;
  &lt;li&gt;End with a learning (My biggest take away from this experience is…)&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;example-of-challenges-and-how-you-handled-them-&quot;&gt;Example of challenges and how you handled them **&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;answer in STAR format. Talk about the solution and the role you played.&lt;/li&gt;
  &lt;li&gt;End with your lesson learn and things to be improved&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;what-is-your-weakness-&quot;&gt;What is your weakness? **&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;the weakness should not be work-related&lt;/li&gt;
  &lt;li&gt;focus on how you improve it
    &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; Example
 sometimes I focus too much on little details 
 improve → prfioritize tasks beforehand and back to little details after everything is done to avoid affecting progress
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;what-is-your-strength-&quot;&gt;What is your strength? **&lt;/h4&gt;
&lt;p&gt;Provide an example to support your answer&lt;/p&gt;

&lt;h4 id=&quot;describe-your-ideal-work-environment-&quot;&gt;Describe your ideal work environment **&lt;/h4&gt;
&lt;p&gt;Match your interest with the company culture&lt;/p&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;   Example
   My ideal work environment is one that emphasizes **collaboration** and encourages **creativity**. 
   I feel that my best results come when I work with different teams and share ideas. 
   Collaboration can always bridge the gap between teams and bring inspiration, and creativity moves the company forward and enables everyone's talents to flourish.
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h4 id=&quot;any-questions-you-want-to-ask-the-interviewer-&quot;&gt;Any questions you want to ask the interviewer **&lt;/h4&gt;
&lt;p&gt;Questions should vary according to different stages of interviews&lt;/p&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;Examples
- Can you share more about the day-to-day responsibilities of this position?
- If I were hired, besides my teammates any other teams I will be working with?
- What does a typical word day look like?
- What do you like about working here?
- Questions about industry research.
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h4 id=&quot;tell-me-a-time-you-handled-a-difficult-situation&quot;&gt;Tell me a time you handled a difficult situation&lt;/h4&gt;
&lt;p&gt;Highlight:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;You are able to listen to, and accept, other people’s point of views even if you have already formed your own opinion and;&lt;/li&gt;
  &lt;li&gt;You are able to put the needs of the business above your own when a conflict does arise in the workplace&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;what-perspectives-do-you-value-most-of-a-companyoffer&quot;&gt;What perspectives do you value most of a company/offer?&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;Growth opportunities&lt;/li&gt;
  &lt;li&gt;Teammates and working environment&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;difficult-questions&quot;&gt;Difficult questions&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Clarify the questions, rephrase and repeat to confirm my understanding correct (to buy time)&lt;/li&gt;
  &lt;li&gt;Break question down&lt;/li&gt;
  &lt;li&gt;Address each segment&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;what-type-of-manager-do-you-work-best-with&quot;&gt;What type of manager do you work best with?&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;encourage &lt;strong&gt;independent&lt;/strong&gt; work (there are managers who prefer to give clear, specific instructions). I work very well independently, but also know when to ask questions.&lt;/li&gt;
  &lt;li&gt;encourage clear communication between management and employees&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;what-kind-of-people-you-dont-like-to-work-with&quot;&gt;What kind of people you don’t like to work with?&lt;/h4&gt;
&lt;p&gt;On a professional level, I have respect for all individuals that work hard and maintain a professional work environment…&lt;/p&gt;

&lt;h4 id=&quot;how-do-you-stay-on-top-of-current-trends-and-innovations&quot;&gt;How do you stay on top of current trends and innovations?&lt;/h4&gt;
&lt;ol&gt;
  &lt;li&gt;Keep an eye on new technologies &lt;strong&gt;news&lt;/strong&gt;
    &lt;ul&gt;
      &lt;li&gt;Follow tech news (hacker news, medium, sign up AWS news for latest deployments and best practices,))&lt;/li&gt;
      &lt;li&gt;Explore trending projects or top starred projects on github &lt;a href=&quot;https://github.com/trending&quot;&gt;https://github.com/trending&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Read companies blogs and the latest research reports (&lt;a href=&quot;https://www.thoughtworks.com/radar&quot;&gt;https://www.thoughtworks.com/radar&lt;/a&gt;)&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Think&lt;/strong&gt; and try to apply the new tech in regular work&lt;/li&gt;
  &lt;li&gt;&lt;strong&gt;Share&lt;/strong&gt; knowledge with friends and colleagues, talk to people from different background&lt;/li&gt;
&lt;/ol&gt;

&lt;h4 id=&quot;what-distinguishes-a-great-software-engineer-from-a-good-one-do-you-feel-you-have-those-qualities&quot;&gt;What distinguishes a great software engineer from a good one? Do you feel you have those qualities?&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;good: given a plan and execute the plan, follow standard and best practices.&lt;/li&gt;
  &lt;li&gt;better: given a problem, find solution and solve the problem&lt;/li&gt;
  &lt;li&gt;great: observe, identify and solve problems, think about what cause the problems and rational behind the solutions. Define and enforce standard&lt;/li&gt;
&lt;/ul&gt;

&lt;h5 id=&quot;whats-your-ownership-level-for-prior-project-and-product&quot;&gt;What’s your ownership level for prior project and product?&lt;/h5&gt;
&lt;h5 id=&quot;what-are-you-looking-for-in-your-next-job&quot;&gt;What are you looking for in your next job?&lt;/h5&gt;
&lt;h5 id=&quot;what-change-did-you-make-in-your-previous-role&quot;&gt;What change did you make in your previous role?&lt;/h5&gt;
&lt;h5 id=&quot;what-do-you-enjoy-most-in-your-last-role&quot;&gt;What do you enjoy most in your last role?&lt;/h5&gt;
&lt;h5 id=&quot;tell-me-about-a-time-when-you-made-a-mistake-and-how-you-rectified-it&quot;&gt;Tell me about a time when you made a mistake and how you rectified it?&lt;/h5&gt;
&lt;h5 id=&quot;give-an-example-of-how-you-inspired-others&quot;&gt;Give an example of how you inspired others&lt;/h5&gt;
&lt;h5 id=&quot;how-to-handle-conflicts-with-your-teammatesmanagers&quot;&gt;How to handle conflicts with your teammates/managers?&lt;/h5&gt;
&lt;h5 id=&quot;how-your-managerteammate-will-describe-you&quot;&gt;How your manager/teammate will describe you?&lt;/h5&gt;
&lt;h5 id=&quot;how-comfortable-are-you-in-a-startup-environment-or-do-you-prefer-working-in-a-more-established-company&quot;&gt;How comfortable are you in a startup environment, or do you prefer working in a more established company?&lt;/h5&gt;

&lt;hr /&gt;

&lt;h3 id=&quot;technical-interview-preparation-materials&quot;&gt;Technical Interview Preparation Materials&lt;/h3&gt;

&lt;h4 id=&quot;cs-foundation&quot;&gt;CS Foundation&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/CyC2018/CS-Notes&quot;&gt;https://github.com/CyC2018/CS-Notes&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/Snailclimb/JavaGuide&quot;&gt;https://github.com/Snailclimb/JavaGuide&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://www.liaoxuefeng.com/wiki/1252599548343744&quot;&gt;https://www.liaoxuefeng.com/wiki/1252599548343744&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://www.baeldung.com/java-tutorial&quot;&gt;https://www.baeldung.com/java-tutorial&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://www.geeksforgeeks.org/&quot;&gt;https://www.geeksforgeeks.org/&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;CS61C &lt;a href=&quot;https://www.youtube.com/playlist?list=PLhMnuBfGeCDM8pXLpqib90mDFJI-e1lpk&quot;&gt;https://www.youtube.com/playlist?list=PLhMnuBfGeCDM8pXLpqib90mDFJI-e1lpk&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;data-structs--algo&quot;&gt;Data Structs &amp;amp; Algo&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;CS61B &lt;a href=&quot;https://sp19.datastructur.es/&quot;&gt;https://sp19.datastructur.es/&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Crack the coding interview&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://labuladong.github.io/algo/&quot;&gt;https://labuladong.github.io/algo/&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://time.geekbang.org/column/intro/126&quot;&gt;https://time.geekbang.org/column/intro/126&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;oop--design-pattern&quot;&gt;OOP &amp;amp; Design Pattern&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://time.geekbang.org/column/intro/250&quot;&gt;https://time.geekbang.org/column/intro/250&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;system-design&quot;&gt;System Design&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;Crack the system design interview&lt;/li&gt;
  &lt;li&gt;Designing Data Intensive Applications&lt;/li&gt;
&lt;/ul&gt;

&lt;h4 id=&quot;database&quot;&gt;Database&lt;/h4&gt;
&lt;ul&gt;
  &lt;li&gt;SQL
    &lt;ul&gt;
      &lt;li&gt;The Internals of PostgreSQL &lt;a href=&quot;http://www.interdb.jp/pg/index.html&quot;&gt;http://www.interdb.jp/pg/index.html&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;MVCC &lt;a href=&quot;https://www.postgresql.org/docs/current/mvcc.html&quot;&gt;https://www.postgresql.org/docs/current/mvcc.html&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;https://www.tutorialspoint.com/postgresql/index.htm&quot;&gt;https://www.tutorialspoint.com/postgresql/index.htm&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;NoSQL&lt;/li&gt;
  &lt;li&gt;Data warehouse&lt;/li&gt;
&lt;/ul&gt;</content><author><name></name></author><summary type="html">My summary of interview preparation.</summary></entry><entry><title type="html">Whathappens After We Input Url To Browser</title><link href="https://shell845.github.io/Whathappens-after-we-input-url-to-browser/" rel="alternate" type="text/html" title="Whathappens After We Input Url To Browser" /><published>2021-02-01T00:00:00+00:00</published><updated>2021-02-01T00:00:00+00:00</updated><id>https://shell845.github.io/Whathappens-after-we-input-url-to-browser</id><content type="html" xml:base="https://shell845.github.io/Whathappens-after-we-input-url-to-browser/">&lt;p&gt;A quick summary for how the browser find and load websites. Also briefly cover some relevant topics.&lt;/p&gt;

&lt;h2 id=&quot;what-happens-after-we-input-url-to-browser&quot;&gt;What happens after we input url to browser&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Input url&lt;/strong&gt;&lt;/p&gt;

    &lt;p&gt;When we type an url link (e.g. www.image.google.com) into address bar of the browser, browser searches from history, bookmark, or cache for strings to match our input parts and provides suggestion (e.g. auto fill up the remaining part of the url). Some browsers may even load the webpage from our caches before we press enter.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Resolve domain name&lt;/strong&gt;&lt;/p&gt;

    &lt;p&gt;Now we press the enter key, the first thing the browser need to do is to resolve the domain name.&lt;/p&gt;

    &lt;ol&gt;
      &lt;li&gt;Browser checks caches of DNS records to find a matching IP address: first browser cache, then OS cache (the local host file), third router cache, and finally ISP cache (our internet service provider). Return if find a match, otherwise continue to step 2.&lt;/li&gt;
      &lt;li&gt;Local DNS server (the ISP DNS server, we call it DNS recursor) initiates a DNS query to recursively search for matching IP of the requested domain. Recursive means the search continues from one DNS server to another until correct IP is found. If still no match, Local DNS server queries root DNS server. UDP is used for DNS queries.&lt;/li&gt;
      &lt;li&gt;Root DNS server tells local DNS server which domain DNS server (e.g. .com domain name server) it should ask. Then local DNS server asks .com DNS server and .com DNS server say “go ask &lt;a href=&quot;http://google.com&quot;&gt;google.com&lt;/a&gt; DNS server, here is its IP address”. This step conducts iteratively.&lt;/li&gt;
      &lt;li&gt;Finally local DNS server get the IP address. It returns the IP to our browser and also save the record in its cache.&lt;/li&gt;
    &lt;/ol&gt;

    &lt;p&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/4274250/106421239-5dcc3480-642a-11eb-90ea-75fcaa029838.png&quot; alt=&quot;SearchDNS&quot; /&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Handshake between browser (client) and server&lt;/strong&gt;&lt;/p&gt;

    &lt;p&gt;Once get the server IP, our browser sends a TCP connection request to server. Connection is established by 3-way handshake.&lt;/p&gt;

    &lt;p&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/4274250/106421311-7ccac680-642a-11eb-9bac-868ce157b403.png&quot; alt=&quot;3way&quot; /&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Browser sends HTTP request to server&lt;/strong&gt;&lt;/p&gt;

    &lt;p&gt;We are ready to transfer data between browser and server after TCP connection is established. The browser sends a GET request to server for &lt;a href=&quot;http://www.image.google.com&quot;&gt;www.image.google.com&lt;/a&gt; webpage.&lt;/p&gt;

    &lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; &lt;span class=&quot;no&quot;&gt;GET&lt;/span&gt; &lt;span class=&quot;nl&quot;&gt;https:&lt;/span&gt;&lt;span class=&quot;c1&quot;&gt;//www.google.com/ HTTP/1.1&lt;/span&gt;
 &lt;span class=&quot;nl&quot;&gt;accept:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;application&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;xhtml&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;xml&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;application&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;xml&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.9&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;avif&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;webp&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;apng&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,*/*;&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.8&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;application&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;signed&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;exchange&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;v&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;b3&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.9&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;accept&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;encoding:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gzip&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;deflate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;br&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;accept&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;language:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;en&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;US&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;en&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;q&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;0.9&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;cache&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;control:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;age&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
 &lt;span class=&quot;nl&quot;&gt;cookie:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;********&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;user&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;agent:&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Mozilla&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;5.0&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Macintosh&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Intel&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Mac&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;OS&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;X&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10_14_0&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;AppleWebKit&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;537.36&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;KHTML&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;like&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Gecko&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Chrome&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;88.0&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;4324.96&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Safari&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;537.36&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Server handles the request and send respond to client&lt;/strong&gt;&lt;/p&gt;

    &lt;p&gt;The respond contains status code (2xx, 3xx, 4xx, 5xx), respond header (content-type (text/html), content-encoding (compression type, e.g. gzip), cache-control, date time, etc), body (webpage contain, etc).&lt;/p&gt;

    &lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt; &lt;span class=&quot;no&quot;&gt;HTTP&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;mf&quot;&gt;1.1&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;OK&lt;/span&gt; 
 &lt;span class=&quot;n&quot;&gt;cache&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;control:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;private&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;age&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;encoding:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;br&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;length:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;63092&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;type:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;charset&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;no&quot;&gt;UTF&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;8&lt;/span&gt;
 &lt;span class=&quot;nl&quot;&gt;date:&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Mon&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;01&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Feb&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2021&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;04&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;03&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;04&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;GMT&lt;/span&gt;
 &lt;span class=&quot;nl&quot;&gt;expires:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;
 &lt;span class=&quot;nl&quot;&gt;server:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gws&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;cookie:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;OTZ&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;expires&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Mon&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;01&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Jan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1990&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;00&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;00&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;00&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;GMT&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=/;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;domain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;google&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;com&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;cookie:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;OTZ&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;expires&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Mon&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;01&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Jan&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1990&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;00&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;00&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;00&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;GMT&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=/;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;domain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;google&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;com&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;set&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;cookie:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;SIDCC&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;AJi4QfHL3HjbiH&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;*********&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;msJGnD&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;pQk9MOOF7Km0&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;expires&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Tue&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;01&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nc&quot;&gt;Feb&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;2022&lt;/span&gt; &lt;span class=&quot;mo&quot;&gt;04&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;03&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;mo&quot;&gt;04&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;GMT&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=/;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;domain&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;google&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;com&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;priority&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;high&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;strict&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;transport&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;security:&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;max&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;age&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;31536000&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;frame&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;options:&lt;/span&gt; &lt;span class=&quot;no&quot;&gt;SAMEORIGIN&lt;/span&gt;
 &lt;span class=&quot;n&quot;&gt;x&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;xss&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nl&quot;&gt;protection:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;strong&gt;Browser display webpage content&lt;/strong&gt;&lt;/p&gt;

    &lt;p&gt;Browser resolve the html page from top to bottom and render while loading. It render bare bone HTML skeleton first then check HTML tags. When there are external resources, e.g. image, video, CSS style sheet, browser sends out GET request asynchronously.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Done! Enjoy your webpage.&lt;/p&gt;

&lt;h2 id=&quot;relevant-topics&quot;&gt;Relevant topics&lt;/h2&gt;

&lt;h3 id=&quot;dns-hierarchy&quot;&gt;DNS hierarchy&lt;/h3&gt;

&lt;div class=&quot;language-java highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;&lt;span class=&quot;o&quot;&gt;-----------------&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Root&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;domain&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;------------------&lt;/span&gt;

&lt;span class=&quot;o&quot;&gt;-------------&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Top&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;level&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;domains&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-----------------&lt;/span&gt;
          &lt;span class=&quot;n&quot;&gt;com&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;edu&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;org&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;gov&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;ca&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;cn&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;us&lt;/span&gt;

&lt;span class=&quot;o&quot;&gt;-------------&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Second&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;level&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;domains&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;-----------------&lt;/span&gt;
       &lt;span class=&quot;n&quot;&gt;google&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;com&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;wikipedia&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;org&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;canada&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;ca&lt;/span&gt; 

&lt;span class=&quot;o&quot;&gt;---------&lt;/span&gt; &lt;span class=&quot;nc&quot;&gt;Third&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;level&lt;/span&gt; &lt;span class=&quot;nf&quot;&gt;domains&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;sub&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;n&quot;&gt;domains&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;)---------&lt;/span&gt;
   &lt;span class=&quot;n&quot;&gt;image&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;google&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;com&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;en&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;wikipedia&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;org&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;n&quot;&gt;www&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;abc&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;com&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h3 id=&quot;internet-protocols&quot;&gt;Internet protocols&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;TCP (reliable)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Connect with 3-way handshake&lt;/p&gt;

&lt;p&gt;Disconnect with 4-way handshake&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/4274250/106421313-7d635d00-642a-11eb-9c98-6e00fe635292.png&quot; alt=&quot;4way&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;UDP (best-effort)&lt;/strong&gt;&lt;/p&gt;

&lt;h3 id=&quot;http-request&quot;&gt;HTTP request&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;POST: (personally prefer to use for create)&lt;/li&gt;
  &lt;li&gt;PUT: idempotent, get same result no matter the action is executed how many time (personally prefer to use for edit)&lt;/li&gt;
  &lt;li&gt;GET&lt;/li&gt;
  &lt;li&gt;DELETE&lt;/li&gt;
  &lt;li&gt;HEAD: identical request of GET but without the response body&lt;/li&gt;
  &lt;li&gt;CONNECT: establishes a tunnel to the server of for target resource&lt;/li&gt;
  &lt;li&gt;OPTIONS: describe the communication options for target resource&lt;/li&gt;
  &lt;li&gt;TRACE: message loop-back test&lt;/li&gt;
  &lt;li&gt;PATCH: partial modifications to a resource&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&quot;http-respond-status-code&quot;&gt;HTTP respond status code&lt;/h3&gt;

&lt;ul&gt;
  &lt;li&gt;1xx informational message&lt;/li&gt;
  &lt;li&gt;2xx success
    &lt;ul&gt;
      &lt;li&gt;200 OK&lt;/li&gt;
      &lt;li&gt;201 created&lt;/li&gt;
      &lt;li&gt;202 accepted&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;3xx redirects
    &lt;ul&gt;
      &lt;li&gt;300 multiple choice&lt;/li&gt;
      &lt;li&gt;301 moved permanently (browser replace old address with new address )&lt;/li&gt;
      &lt;li&gt;302 found (moved temporarily)&lt;/li&gt;
      &lt;li&gt;308 Permanent Redirect, same semantics as 301, except that the user agent must not change the HTTP method used: If a POST was used in the first request, a POST must be used in the second request&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;4xx error on client
    &lt;ul&gt;
      &lt;li&gt;400 Bad Request (server doesn’t understand the request)&lt;/li&gt;
      &lt;li&gt;401 Unauthorized (actually means &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;unauthenticated&lt;/code&gt;)&lt;/li&gt;
      &lt;li&gt;403 Forbidden (no access right)&lt;/li&gt;
      &lt;li&gt;404 Not Found&lt;/li&gt;
      &lt;li&gt;408 Request Timeout&lt;/li&gt;
      &lt;li&gt;414 URI Too Long&lt;/li&gt;
      &lt;li&gt;429 Too Many Requests&lt;/li&gt;
      &lt;li&gt;418 I’m a teapot (fun way to say ‘server wish not to handle this request’)&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;5xx error on server
    &lt;ul&gt;
      &lt;li&gt;500 Internal Server Error&lt;/li&gt;
      &lt;li&gt;502 Bad Gateway&lt;/li&gt;
      &lt;li&gt;503 Service Unavailable&lt;/li&gt;
      &lt;li&gt;504 Gateway Timeout&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</content><author><name></name></author><summary type="html">A quick summary for how the browser find and load websites. Also briefly cover some relevant topics.</summary></entry><entry><title type="html">How Https Works And Why It Is Secure</title><link href="https://shell845.github.io/How-HTTPS-works-and-why-it-is-secure/" rel="alternate" type="text/html" title="How Https Works And Why It Is Secure" /><published>2021-01-31T00:00:00+00:00</published><updated>2021-01-31T00:00:00+00:00</updated><id>https://shell845.github.io/How-HTTPS-works-and-why-it-is-secure</id><content type="html" xml:base="https://shell845.github.io/How-HTTPS-works-and-why-it-is-secure/">&lt;p&gt;If clients and servers communicate with HTTP, all messages are sent in plain texts. Anyone intercepts the conversation can eavesdrop and retrieve all information (eavesdropping, tampering, pretending).&lt;/p&gt;

&lt;p&gt;We can encrypt our messages to make the conversation more secure. There are two types of encryption:&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Symmetric encryption: use a single key for encryption and decryption&lt;/li&gt;
  &lt;li&gt;Asymmetric encryption: use a pair of keys (public key and private key) to encrypt and decrypt&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;HTTPS actually means HTTP + SSL. The protocol uses asymmetric encryption to exchange keys between server and client (for security), and uses symmetric encryption to encrypt messages (for performance).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The HTTPS establish flow&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Step 1 Handshake: client and server exchange keys and verify certificate, then generate session key for coming conversation&lt;/p&gt;

&lt;p&gt;Step 2 Conversation: client and server communicate with each other with session key.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://user-images.githubusercontent.com/4274250/106400414-4a9a7400-63ec-11eb-8f8d-aa66e48383b5.png&quot; alt=&quot;HTTPS handshake&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTTPS is secure because&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;Conversations are encrypted by session key so eavesdroppers cannot decrypt.&lt;/li&gt;
  &lt;li&gt;Prevent man-in-the-middle attack since only client and server have session key.&lt;/li&gt;
  &lt;li&gt;Trusted CA signed certs are trustworthy&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Why private key can decrypt messaged encrypted by public key&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The public key can be known by everyone. However messages encrypted with the public key can only be decrypted in a reasonable amount of time by using the paired private key.&lt;/p&gt;

&lt;p&gt;The basic idea is to find 3 numbers (e, d, n) to fulfil &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;M^(e*d) (mod n) = M&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;How to generate public-private key pair (RSA):&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;pick large prime number p and q, calculate n = p * q&lt;/li&gt;
  &lt;li&gt;pick an exponential number e, e &amp;lt; (p - 1)&lt;em&gt;(q - 1) and e is relatively prime to (p - 1)&lt;/em&gt;(q - 1)&lt;/li&gt;
  &lt;li&gt;Compose public key with e and n&lt;/li&gt;
  &lt;li&gt;Compute d with (e, p, q), compose private key with d and n&lt;/li&gt;
&lt;/ol&gt;</content><author><name></name></author><summary type="html">If clients and servers communicate with HTTP, all messages are sent in plain texts. Anyone intercepts the conversation can eavesdrop and retrieve all information (eavesdropping, tampering, pretending).</summary></entry><entry><title type="html">Replace Elb+acm With+nginx+certbot</title><link href="https://shell845.github.io/Replace-ELB+ACM-with+Nginx+Certbot/" rel="alternate" type="text/html" title="Replace Elb+acm With+nginx+certbot" /><published>2020-05-01T00:00:00+00:00</published><updated>2020-05-01T00:00:00+00:00</updated><id>https://shell845.github.io/Replace-ELB+ACM-with+Nginx+Certbot</id><content type="html" xml:base="https://shell845.github.io/Replace-ELB+ACM-with+Nginx+Certbot/">&lt;p&gt;My blog is hosting on AWS in the structure of ELB (with ACM) + EC2 as app server + RDS as database (detail implementation in previous blog). Now I want to replace ELC and ACM with Nginx and Certbot.&lt;/p&gt;

&lt;p&gt;Nginx is a web server which can be used as a reverse proxy, load balancer, mail proxy and HTTP cache. Here I use it as a reverse proxy. Since I only have one app server so load balancing is unnecessary.&lt;/p&gt;

&lt;p&gt;Let’s Encrypt is a free certificate authority (CA) runs by Internet Security Research Group (ISRG). The process to manually create, apply and maintain certs can be miserable. Luckily Certbot offers free tool to handle these automatically.&lt;/p&gt;

&lt;p&gt;By the way, use AWS public CA is free, just we cannot export the cert and can only use the cert within AWS services via AWS Certificate Manager (ACM).&lt;/p&gt;

&lt;h2 id=&quot;part-1---nginx&quot;&gt;Part 1 - Nginx&lt;/h2&gt;
&lt;h4 id=&quot;installation&quot;&gt;Installation&lt;/h4&gt;
&lt;p&gt;I launch a new ubuntu server to host Nginx in AWS in the same PVC and same security group as my ELB (permission for accessing app server had been configured in previous blog).&lt;/p&gt;

&lt;p&gt;The first step is to install Nginx. Just few commands following the official guide http://nginx.org/en/linux_packages.html.&lt;/p&gt;

&lt;p&gt;After installation, set and run nginx:&lt;/p&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;sudo systemctl enable nginx
sudo systemctl start nginx
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And confirm everything is alright:&lt;/p&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;sudo systemctl status nginx
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h4 id=&quot;configuration&quot;&gt;Configuration&lt;/h4&gt;
&lt;p&gt;Some default paths for reference:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Main config file: /etc/nginx/nginx.conf&lt;/li&gt;
  &lt;li&gt;Other config files: /etc/nginx/conf.d/&lt;/li&gt;
  &lt;li&gt;Access log: /var/log/nginx/access.log&lt;/li&gt;
  &lt;li&gt;Static files: /usr/share/nginx/html&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I create a customised blog.conf and include it into main config file. A full config file sample is available here https://www.nginx.com/resources/wiki/start/topics/examples/full/. Server block is the key part to modify, multiple server blocks and multiple locations in server block can be added.&lt;/p&gt;
&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;server {
    listen      &amp;lt;port, by default 80&amp;gt;;
    server_name &amp;lt;domain&amp;gt;;

    location / {
        proxy_pass http://&amp;lt;app server IP&amp;gt;:8080;
    }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;h2 id=&quot;part-2---certbot&quot;&gt;Part 2 - Certbot&lt;/h2&gt;
&lt;p&gt;The Certbot guide is pretty clear https://certbot.eff.org/lets-encrypt/ubuntufocal-nginx. Just follow the guide step by step and Certbot automatically helps to issue certs and config Nginx.&lt;/p&gt;

&lt;p&gt;How Certbot verify our domain? A random generated strings is attached to certain location in Nginx config, Cerbot server tries access the location for verification. Once complete, these sections are auto deleted.&lt;/p&gt;

&lt;p&gt;All Nginx configurations modified by Certbot have append # managed by Certbot.&lt;/p&gt;

&lt;p&gt;Also forward requests from http 80 port to https 443 port.&lt;/p&gt;

&lt;p&gt;Finally the blog is equipped with new cert. The cert is valid for 3 months and will be renew automatically by Certbot.
&lt;img src=&quot;https://acloudgurulab-2019-yc.s3.amazonaws.com/letsencryptcert.png&quot; alt=&quot;let's cert&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;part-3---aws-route-53&quot;&gt;Part 3 - AWS Route 53&lt;/h2&gt;
&lt;p&gt;Change the record set of my blog domain to map to Nginx server.&lt;/p&gt;

&lt;h3 id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://acloudgurulab-2019-yc.s3.amazonaws.com/nginxflowchart.png&quot; alt=&quot;flowchart&quot; /&gt;&lt;/p&gt;

&lt;p&gt;[End]&lt;/p&gt;</content><author><name></name></author><summary type="html">My blog is hosting on AWS in the structure of ELB (with ACM) + EC2 as app server + RDS as database (detail implementation in previous blog). Now I want to replace ELC and ACM with Nginx and Certbot.</summary></entry><entry><title type="html">Deploy Java Web App To Aws</title><link href="https://shell845.github.io/Deploy-Java-Web-App-to-AWS/" rel="alternate" type="text/html" title="Deploy Java Web App To Aws" /><published>2020-04-01T00:00:00+00:00</published><updated>2020-04-01T00:00:00+00:00</updated><id>https://shell845.github.io/Deploy-Java-Web-App-to-AWS</id><content type="html" xml:base="https://shell845.github.io/Deploy-Java-Web-App-to-AWS/">&lt;p&gt;I have just completed the development of my personal blog and want to bring it online so that my parents can visit (as an evidence to convince them that I’m really studying XDD).&lt;/p&gt;

&lt;p&gt;I pick up AWS and decide to deploy it step by step instead of using auto-deployment tools like beanstalk or heroku as I want a chance to review the AWS topic and understand more about the deployment process.&lt;/p&gt;

&lt;h4 id=&quot;step-1---launch-ec2&quot;&gt;Step 1 - Launch EC2&lt;/h4&gt;
&lt;p&gt;I launched a EC2 instance Amazon Linux 2 AMI (centos) - t2.micro, with 1 vCPU and 1G memoryIt is free tier and enough to handle my tiny blog since I’m not expecting large amount of visitors. Edit the ec2 security group to allow 0.0.0.0/0 all inbound traffic (we will further modify this later after create ELB).&lt;/p&gt;

&lt;p&gt;Then SSH to the EC2&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;[root@ip-xx]$ ssh -i /path/&amp;lt;key-pair&amp;gt;.pem ec2-user@&amp;lt;ec2 public dns&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Retrieve and install Tomcat&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;[root@ip-xx]$ wget https://apache.website-solution.net/tomcat/tomcat-9/v9.0.34/bin/apache-tomcat-9.0.34.tar.gz
[root@ip-xx]$ tar -zvxf apache-tomcat-9.0.34.tar.gz
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Navigate to the folder bin under tomcat folder, run the start up script. If everything goes right we should be able to see the default tomcat page when access http://&lt;ec2 ip=&quot;&quot;&gt;:8080 in browser. Port 8080 is the default port of tomcat and it also can be customised.&lt;/ec2&gt;&lt;/p&gt;

&lt;h4 id=&quot;step-2---launch-rds&quot;&gt;Step 2 - Launch RDS&lt;/h4&gt;
&lt;p&gt;I choose MySQL free tier and put it into the same VPC as the ec2 instance which hosts our web app.&lt;/p&gt;

&lt;p&gt;Edit the inbound rule to allow access from ec2. Here we use default port 3306 and attach ec2’s security group.&lt;/p&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Type&lt;/th&gt;
      &lt;th&gt;Protocol&lt;/th&gt;
      &lt;th&gt;Port&lt;/th&gt;
      &lt;th&gt;Source&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;MYSQL/Aurora&lt;/td&gt;
      &lt;td&gt;TCP&lt;/td&gt;
      &lt;td&gt;3306&lt;/td&gt;
      &lt;td&gt;web-app-ec2-sg&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;&lt;em&gt;[rds security group]&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Don’t forget to create necessary tables for your web app after create the RDS instance.&lt;/p&gt;

&lt;h4 id=&quot;step-3---upload-java-web-app&quot;&gt;Step 3 - Upload java web app&lt;/h4&gt;

&lt;p&gt;Now wrap up the java war. My blog is a maven project. When I tried to wrap up I encountered with some keystore problems when trying to download maven-surefire-plugin during test process in packaging. Unfortunately I cannot solve it so I just skip the test for packaging.&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;mvn clean package -Dmaven.test.skip=true
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Upload the war to EC2.&lt;/p&gt;

&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;scp -i /path/&amp;lt;key-pair&amp;gt;.pem /path/&amp;lt;webapp&amp;gt;.war ec2-user@&amp;lt;ec2 public dns&amp;gt;:~/
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Put the war under part tomcat/webapps. I rename the war to ROOT.war and remove the original ROOT folder under webapps to make my blog the default web.&lt;/p&gt;

&lt;p&gt;Then restart tomcat - BOOM~~~ we now can visit the blog via http://&lt;ec2 public=&quot;&quot; IP=&quot;&quot;&gt;:8080.&lt;/ec2&gt;&lt;/p&gt;

&lt;h4 id=&quot;step-4---domain-and-ssl-cert&quot;&gt;Step 4 - Domain and SSL cert&lt;/h4&gt;
&lt;p&gt;I don’t want visitors to access our blog via raw IP, besides I want to enable https to secure the access.&lt;/p&gt;

&lt;p&gt;First I buy a domain (AWS provides the service, but I myself brought my domain from namecheap. there are also other providers to buy domain).&lt;/p&gt;

&lt;p&gt;Then back to AWS Rout53, create a hosted zone, bring the domain we just brought to rout53 (also need to input the aws NS to namecheap). Setup CNAME record for our domain in rout53. Note things may mess up if we use CNAME record for root domain, so instead we use A record (alias) for root domain in AWS.&lt;/p&gt;

&lt;p&gt;The last step is to get our domain certified in AWS Certificate Manager. It’s pretty straightforward and do make our life easier comparing with all the steps we need to walk through if we are creating our cert with 3rd party e.g ssls.com.&lt;/p&gt;

&lt;p&gt;Once our cert is ready in ACM, we can directly import it to ELB.&lt;/p&gt;

&lt;h4 id=&quot;step-5---link-elb-to-ec2&quot;&gt;Step 5 - Link ELB to EC2&lt;/h4&gt;
&lt;p&gt;To make the access to the blog more secure and more stable, I want all visiting requests flow to ELB and let ELB direct the traffics to my web app EC2.&lt;/p&gt;

&lt;p&gt;So, go create the ELB. After creation, add the SSL cert we created in ACM in previous step to ELB https port 443, and set http port 80 to redirect to our https path.&lt;/p&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Listener ID&lt;/th&gt;
      &lt;th&gt;Security policy&lt;/th&gt;
      &lt;th&gt;SSL Certificate&lt;/th&gt;
      &lt;th&gt;Rules&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;HTTP : 80&lt;/td&gt;
      &lt;td&gt;N/A&lt;/td&gt;
      &lt;td&gt;N/A&lt;/td&gt;
      &lt;td&gt;Default: redirecting to HTTPS://#{host}:443/&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;HTTPS : 443&lt;/td&gt;
      &lt;td&gt;elb-sp&lt;/td&gt;
      &lt;td&gt;&lt;cert from=&quot;&quot; acm=&quot;&quot;&gt;&lt;/cert&gt;&lt;/td&gt;
      &lt;td&gt;Default: forwarding to &lt;webapp&gt;&lt;/webapp&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;&lt;em&gt;[elb listener ]&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Now we can further modify the ec2 security group, to allow inbound from ELB and SSH only.&lt;/p&gt;

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Type&lt;/th&gt;
      &lt;th&gt;Protocol&lt;/th&gt;
      &lt;th&gt;Port&lt;/th&gt;
      &lt;th&gt;Source&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Custom TCP&lt;/td&gt;
      &lt;td&gt;TCP&lt;/td&gt;
      &lt;td&gt;8080&lt;/td&gt;
      &lt;td&gt;load-balancer-sg&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;SSH&lt;/td&gt;
      &lt;td&gt;TCP&lt;/td&gt;
      &lt;td&gt;22&lt;/td&gt;
      &lt;td&gt;0.0.0.0/0&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;p&gt;&lt;em&gt;[ec2 security group]&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;And we use S3 to store images if any in our blog.&lt;/p&gt;

&lt;p&gt;The final chart is:&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://acloudgurulab-2019-yc.s3.amazonaws.com/flowchart.png&quot; alt=&quot;flowchart&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Done!&lt;/p&gt;</content><author><name></name></author><summary type="html">I have just completed the development of my personal blog and want to bring it online so that my parents can visit (as an evidence to convince them that I’m really studying XDD).</summary></entry></feed>