{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/deploy-and-config-website-on-namecheap-part-2","result":{"data":{"markdownRemark":{"id":"9e43ce6d-102d-596f-99ba-08bdc9b1f04e","html":"<p>Ở <a href=\"/posts/depoy-and-config-website-on-name-cheap-part-1\">phần trước</a> mình đã hướng dẫn anh em mua và connect <strong>domain</strong> với <strong>hosting</strong>,  activate <strong>SSL Certificate</strong>.</p>\n<p>Phần này mình sẽ hướng dẫn cách đẩy code lên <strong>server</strong> để website go live nhé 🚀</p>\n<h2 id=\"trên-server-có-những-gì-\" style=\"position:relative;\"><a href=\"#tr%C3%AAn-server-c%C3%B3-nh%E1%BB%AFng-g%C3%AC-\" aria-label=\"trên server có những gì  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Trên server có những gì 👀?</h2>\n<p>Để tìm hiểu cấu trúc folder trên server anh em vào <strong>cPanel</strong> (bài trc mình có hướng dẫn cách vào). Mở <strong>File Manager</strong> trong section <strong>Files</strong></p>\n<p><img src=\"/media/file-manager.png\" alt=\"cpanel file manager\"></p>\n<p>Đây chính là cấu trúc thư mục trên server! By default mình sẽ ở <strong>root directory</strong> là <code class=\"language-text\">/home/&lt;cpanel-username&gt;</code></p>\n<p>Folder chúng ta cần quan tâm là <code class=\"language-text\">./public_html</code>, đây là nơi chứa toàn bộ source code (<em>html</em>, <em>css</em>, <em>js</em>) của trang. Mục tiêu chính là đưa toàn bộ file code lên đây.</p>\n<p><strong>File Manager</strong> cho phép upload trực tiếp file lên nhưng k cho upload <strong>folder</strong> 💆. Chính vì vậy mình sử dụng 1 tool đc <strong>namecheap</strong> <a href=\"https://www.namecheap.com/support/knowledgebase/article.aspx/1279/205/how-to-set-up-filezilla/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">recommend</a> là <a href=\"https://filezilla-project.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">FileZilla</a>.</p>\n<h2 id=\"authorize-filezilla\" style=\"position:relative;\"><a href=\"#authorize-filezilla\" aria-label=\"authorize filezilla permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Authorize FileZilla</h2>\n<p><strong>FileZilla</strong> sẽ kết nối và 🚚 lên <strong>server</strong> thông qua việc truy cập đến server bằng FTP (<strong>File Transfer Protocol</strong>).</p>\n<p>Để 1 <strong>middle-man</strong> 👷 có thể giúp chúng ta đưa file lên <strong>server</strong>, nghiễm nhiên cần cấp quyền cho tool đó => cần tạo 1 <a href=\"https://www.namecheap.com/support/knowledgebase/article.aspx/9523/205/how-to-create-an-ftp-account\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><strong>FTP Account</strong></a>, <strong>FileZilla</strong> sẽ dùng tài khoản này để đưa code lên server cho chúng ta.</p>\n<p>Tạo 1 <strong>FTP Account</strong> rất đơn giản:</p>\n<ul>\n<li>Vào <strong>cPanel</strong>, click <strong>FPT Accounts</strong> trong section <strong>Files</strong>.</li>\n<li>Nhập <strong>username</strong>, <strong>password</strong> (chú ý đừng quên nhé 😅).</li>\n</ul>\n<p><img src=\"/media/ftp.png\" alt=\"FTP Account\"></p>\n<p><strong>Note ⚠️:</strong> 1 điểm cần chú ý khi tạo <strong>FTP Account</strong> là anh em cần để <code class=\"language-text\">access-directory</code> cho account này là <code class=\"language-text\">root-directory</code> nhé, không thì account này sẽ k có quyền access vào <code class=\"language-text\">./public_html</code> folder đâu 😅.</p>\n<h2 id=\"setup-filezilla\" style=\"position:relative;\"><a href=\"#setup-filezilla\" aria-label=\"setup filezilla permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Setup FileZilla</h2>\n<p>Sau khi đã <a href=\"https://filezilla-project.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">download</a> và cài đặt <strong>FileZilla</strong>, chúng ta sẽ connect đến server bằng <strong>FTP Account</strong> vừa tạo.</p>\n<p><a href=\"https://www.namecheap.com/support/knowledgebase/article.aspx/1279/205/how-to-set-up-filezilla/#quickconnect\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Quick connect</a> là cách đơn giản nhất để connect đến server, anh em cần 4 thông tin:</p>\n<ul>\n<li><strong>Host name</strong>: <code class=\"language-text\">ftpes://&lt;host-name&gt;</code> (đừng quên prefix <code class=\"language-text\">ftpes://</code> nhé!)</li>\n</ul>\n<p><img src=\"/media/hostname.png\" alt=\"Host name\"></p>\n<p><em>(Host name ở ngay trên <strong>URL</strong> trong <strong>cPanel</strong>)</em>.</p>\n<ul>\n<li><strong>Username</strong>: chính là <strong>FTP Account</strong> anh em vừa tạo, với format: <code class=\"language-text\">&lt;ftp-account-name&gt;@&lt;your-domain&gt;</code></li>\n<li><strong>Password</strong></li>\n<li><strong>Port</strong>: auto là <code class=\"language-text\">21</code>.</li>\n</ul>\n<p>Cung cấp đủ thông tin rồi click <strong>Quickconnect</strong>.\nPhải thấy tín hiệu <strong>successful</strong> thì mới đc nhé.</p>\n<p><img src=\"/media/filezilla.png\" alt=\"Connect to server via FileZilla\"></p>\n<p><em>(Đừng giật mình khi thấy mất <strong>port</strong> nhé, <strong>FileZilla</strong> tự xoá đấy 😤)</em></p>\n<h2 id=\"đẩy-code-lên-server\" style=\"position:relative;\"><a href=\"#%C4%91%E1%BA%A9y-code-l%C3%AAn-server\" aria-label=\"đẩy code lên server permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Đẩy code lên server</h2>\n<p>Phần phức tạp nhất đã xong 🙈 🙉, bây giờ đẩy code lên <strong>server</strong> thôi!</p>\n<p><img src=\"https://media.giphy.com/media/R2m2NzVxQ3pbG/giphy.gif\" alt=\"Close\"></p>\n<p>Trong <strong>FileZilla</strong> gồm 2 phần:</p>\n<ul>\n<li><strong>Local site</strong>: toàn bộ thư mục trong máy, anh em tìm đến folder chứa code của mình (chú ý là phần code đã build nhé) - trong trường hợp này của mình là folder <code class=\"language-text\">./public</code> (có thể là <code class=\"language-text\">./build</code>, <code class=\"language-text\">./dist</code>, <code class=\"language-text\">./public</code> … tuỳ theo config app)</li>\n<li><strong>Remote site</strong>: toàn bộ folder trên <strong>server</strong>, anh em tìm đến <code class=\"language-text\">./public_html</code>.</li>\n</ul>\n<p><img src=\"/media/filezilla2.png\" alt=\"Close\"></p>\n<p>Chọn tất cả file ở <strong>Local</strong> và kéo sang <strong>Remote</strong> là … xong  🎉</p>\n<p>Bây giờ chỉ việc mở site của mình ra kiểm tra thành quả rồi fix lỗi typo thôi 😆😆😆</p>\n<p><img src=\"https://media.giphy.com/media/SfYTJuxdAbsVW/giphy.gif\" alt=\"Done\"></p>\n<h2 id=\"two-factor-authentication-optional\" style=\"position:relative;\"><a href=\"#two-factor-authentication-optional\" aria-label=\"two factor authentication optional permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Two Factor Authentication (Optional)</h2>\n<p>Two Factor Authentication (<strong>2FA</strong>) hay bảo mật 2 lớp (hoàn toàn free từ <a href=\"https://www.namecheap.com/security/2fa-two-factor-authentication/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">namecheap</a>) là việc thêm 1 lớp bảo mật cho tài khoản <strong>namecheap</strong> (phải qua đc cả 2 lớp mới truy cập đc resource của mình - sẽ k lo lắng nếu chẳng may bị mất account vì lớp bảo mật thứ 2 nằm trên 1 device khác).</p>\n<p>Lớp thứ nhất chính là <strong>username/password</strong> lớp thứ 2 có thể chọn 1 trong nhiều cách:</p>\n<ul>\n<li><strong>U2F (Universal 2nd Factor)</strong>: sử dụng 1 <a href=\"https://www.namecheap.com/support/knowledgebase/article.aspx/10102/45/how-can-i-use-the-u2f-method-for-twofactor-authentication\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">physical device</a> giống như 1 chiếc chìa khoá để bảo mật.</li>\n<li><strong>TOTP (Time-based One-Time Password)</strong>: sử dụng 1 password ngắn hạn trên 1 device khác thông qua <strong>Authentication app</strong> như: <a href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&#x26;hl=en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google Authenticator</a>, <a href=\"https://authy.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Authy</a> …</li>\n<li><strong>Text Message Authentication</strong>: thông qua tin nhắn trên điện thoại.</li>\n</ul>\n<p>Mình chọn sử dụng <strong>TOTP</strong> thông qua app <a href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&#x26;hl=en\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google Authenticator</a>.</p>\n<p>Anh em tải app về điện thoại rồi vào <strong>cPanel</strong> mở <strong>Two Factor Authentication</strong> trong section <strong>Security</strong>, scan <strong>QR Code</strong>, Done!</p>\n<p>Mỗi lần đăng nhập <strong>namecheap</strong> sẽ hỏi thêm <strong>TOTP</strong> từ app để bảo an toàn.</p>\n<h2 id=\"kết-bài\" style=\"position:relative;\"><a href=\"#k%E1%BA%BFt-b%C3%A0i\" aria-label=\"kết bài permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Kết bài</h2>\n<p>Hi vọng <a href=\"/category/tutorials\">tutorial</a> này giúp anh em hiểu thêm về server và có thể tự host 1 trang của riêng mình.</p>\n<p>Nếu k muốn mua chúng ta hoàn toàn có thể sử dụng các <strong>Free Hosting Service</strong> khác như: <strong>Github Page</strong>, <strong>Heroku</strong>, <strong>Netlify</strong>, <strong>Zeit Now</strong>… (đều có hỗ trợ <strong>build tool</strong> và <strong>config</strong> đầy đủ, chỉ cần <strong>connect</strong> source code là xong).</p>\n<p>Anh em có suy nghĩ gì thì để lại dưới phần comment nhé! (<strong>Email</strong> chỉ để generate <a href=\"https://gravatar.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Gravatar</a> thôi, mình k spam gì đâu 😉).</p>\n<h2 id=\"tham-khảo\" style=\"position:relative;\"><a href=\"#tham-kh%E1%BA%A3o\" aria-label=\"tham khảo permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Tham khảo</h2>\n<ul>\n<li><a href=\"https://www.namecheap.com/resource-center/tutorials/building-your-first-website/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://www.namecheap.com/resource-center/tutorials/building-your-first-website/</a></li>\n<li><a href=\"https://www.namecheap.com/support/knowledgebase/article.aspx/1279/205/how-to-set-up-filezilla/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://www.namecheap.com/support/knowledgebase/article.aspx/1279/205/how-to-set-up-filezilla/</a></li>\n<li><a href=\"https://www.namecheap.com/security/2fa-two-factor-authentication/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://www.namecheap.com/security/2fa-two-factor-authentication/</a></li>\n</ul>","fields":{"slug":"/posts/deploy-and-config-website-on-namecheap-part-2","tagSlugs":["/tag/deployment/","/tag/domain/","/tag/hosting/","/tag/dns/","/tag/namecheap/"]},"frontmatter":{"date":"2020-04-25T16:20:03.284Z","description":"Ở phần trước mình đã hướng dẫn anh em mua và connect domain với hosting, activate SSL Certificate. Phần này mình sẽ hướng dẫn cách đẩy code lên server để website go live nhé 🚀 ...","tags":["deployment","domain","hosting","dns","namecheap"],"title":"Deploy và cấu hình website trên namecheap trong vòng 1 nốt nhạc [Part 2]","socialImage":"https://images.unsplash.com/photo-1579484955380-8859fccd3d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80","headerImage":"https://images.unsplash.com/photo-1579484955380-8859fccd3d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80"},"timeToRead":5}},"pageContext":{"slug":"/posts/deploy-and-config-website-on-namecheap-part-2"}}}