Logo

dev-resources.site

for different kinds of informations.

Publish HTTPS Local Server Using Cloudflare

Published at
5/21/2024
Categories
cloudflarechallenge
administrator
linux
devops
Author
seno21
Author
6 person written this
seno21
open
Publish HTTPS Local Server Using Cloudflare

hallo world!
Postingan kali ini akan membahas sedikit studi kasus, kita akan membuat server lokal kita agar bisa di akses online. Kali ini kita akan hubungkannya dengan cloudflare.

Kenapa cloudflare?
Karena Cloudflare memiliki fitur CDN (Content Delivery Network) dan juga DDOS Protection, sehingga membuat website lebih aman.

Kita akan langsung ke lab, berikut ini gambaran topologinya

Image description

Sedikit saya jelaskan Topologinya, jadi pada gambar di atas saya punya server local, router dengan Public Static IP, domain nzucode.store (berlangganan pada provider) dan akun cloudflare.

  • Step 1: Pointing Domain ke Cloudflare

Pertama kita perlu melakukan forwarding port 80 dan 443 pada router, ini bertujuan agar server lokal kita bisa di ekspose keluar, pada kasus saya menggunakan mikrotik.

Image description

Pada cloudflare kita copy pada bagian nameserver

Image description
Ini nantinya akan kita arahkan untuk nameserver domain kita. Untuk caranya berbeda-beda tergantung provider domain yg kita pakai, disini saya menggunakan rumahweb sebagai providernya. Kurang lebih seperti ini caranya https://www.rumahweb.com/journal/cara-setting-domain-di-cloudflare/

  • Step 2: Konfigurasi SSL Certificate

Kita akan membuat certificate SLL pada cloudflare, Certificate ini yg nantinya akan kita pasang pada sisi server local. Pastikan untuk mengcopy dan menyimpanya, karena certificate .pem hanya bisa dilihat satu kali.

Image description

Pastikan juga untuk enable beberapa opsi berikut

Image description

Image description

  • Step 3: Install Certificate Pada Local Server

Pertama buat config file di /etc/apache2/sites-available
untuk nama confignya misal nzucode.com.conf, Untuk referensi kita bisa copy juga dari default-ssl.conf, tapi nanti perlu ada yg di ubah. Contoh konfignya saya cantumkan berikut:

<VirtualHost *:443>
        DocumentRoot /var/www/html
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        SSLEngine on

        SSLCertificateFile      /etc/ssl/certs/nzucode.pem
        SSLCertificateKeyFile /etc/ssl/private/nzucode.key

</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
Enter fullscreen mode Exit fullscreen mode

Kita buat file dengan nama nzucode.pem pada directory /etc/ssl/certs/ lalu paste certificate .pem yang di dapat dari cloudflare.

nano /etc/ssl/certs/nzucode.pem
Enter fullscreen mode Exit fullscreen mode

Buat juga file dengan nama nzucode.key pada directory /etc/ssl/private/ dan pastekan juga certificate .key yang sebelumnya kita dapatkan dari cloudflare juga.

nano /etc/ssl/private/nzucode.key
Enter fullscreen mode Exit fullscreen mode

Untuk direktory SSL .pem dan .key bisa di sesuaikan sesuai config site-available yg kita setting.

Selanjutnya tinggal aktifkan modul ssl dan enable site confignya (Ini bertujuan untuk enable config nzucode.com.conf)

a2enmod ssl
Enter fullscreen mode Exit fullscreen mode
a2ensite nzucode.com.conf
Enter fullscreen mode Exit fullscreen mode

Setelah itu pastikan confignya semua benar dengan

apachectl configtest
Enter fullscreen mode Exit fullscreen mode

jika terdapat error seperti berikut ini

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message
Syntax OK
Enter fullscreen mode Exit fullscreen mode

Cukup tambahkan syntak berikut ini ServerName 127.0.0.1
pada baris paling bawah config file /etc/apache/apache2.conf.

# Include generic snippets of statements
IncludeOptional conf-enabled/*.conf

# Include the virtual host configurations:
IncludeOptional sites-enabled/*.conf

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
ServerName 127.0.0.1

Enter fullscreen mode Exit fullscreen mode

lalu coba lagi jalankan perintahnya

apachectl configtest
Enter fullscreen mode Exit fullscreen mode

jika sudah berhasil lakukan reload dan restart apachenya

systemctl reload apache2.service
systemctl restart apache2.service
Enter fullscreen mode Exit fullscreen mode
  • Step 4: Konfigurasi SSL Certificate Terakhir kita hanya perlu testing dengan ssl checker

Image description

Coba akses halaman web nya, seharusnya sudah https.
Selamat mencoba, semoga bermanfaat.

cloudflarechallenge Article's
30 articles in total
Favicon
在 Nextjs δΈ­ζ— ηΌι›†ζˆ Cloudflare Turnstile
Favicon
I built a Github user analysis and ranking website
Favicon
How to Create an AI Image Generator Using Cloudflare Workers AI SDK
Favicon
I Created a Web App with hono Where Everyone Can Knead Clay Together
Favicon
Unlocking the Potential of Cloudflare Workers for Small Projects
Favicon
Cloudflare Launches Free Tool to Combat AI Bot Scraping
Favicon
How to Identify Cloudflare Turnstile | By using CapSolver Extension
Favicon
Validate your Jenkinsfile with the vscode plugin vscode-jenkins-pipeline-linter-connector and the LLMs large model
Favicon
Publish HTTPS Local Server Using Cloudflare
Favicon
Slater - virtual language learning companion
Favicon
Frame fushion
Favicon
Comprehend AI - Elevate Your Reading Comprehension Skills!
Favicon
Conversational Intelligence Miner
Favicon
Literally read YouTube videos
Favicon
NewsCast: daily audio news podcasts for your interests (Cloudflare AI Challenge)
Favicon
β€œWhy do we need to learn this?”
Favicon
STONKS APP πŸ“ˆπŸ“‰- Stocks helper for Beginners
Favicon
Generate my Pet
Favicon
Journal your ideas and experiences with your voice: Voice Journal
Favicon
Cloudflare Challenge
Favicon
PicsTweakr
Favicon
AI Twitter & LinkedIn Bio Generator
Favicon
KodeStyle: Let's style the way we code and show!
Favicon
KodeStyle: Let's style the way we code and show!
Favicon
MATT AI
Favicon
Congrats to the Cloudflare AI Challenge Winners!
Favicon
Steps to build a text generator application in workers ai by cloudflare
Favicon
Building a Short Story Assistant using Cloudflare AI
Favicon
Vanilla worker playground for cloudflare AI
Favicon
Di1 - AI Driven Insights With Cloudflare

Featured ones: