The latest articles on DEV Community by Jumpei Ogawa (@phanect). https://dev.to/phanect 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%2F43209%2Fc4ca0505-2410-4b7d-a10f-acb8767d3e89.jpg https://dev.to/phanect en Jumpei Ogawa Sun, 13 Feb 2022 14:29:30 +0000 https://dev.to/phanect/how-to-create-staging-environment-on-cloudflare-pages-7ha https://dev.to/phanect/how-to-create-staging-environment-on-cloudflare-pages-7ha <p>As far as I know, Cloudflare does not officially provide documents to set up staging environments on Cloudflare Pages.<br> I raised a feature request to allow us creating staging environments, and then I got an advise how to create staging environments.</p> <h2> Premises </h2> <p>When you push or merge changes to the <code>staging</code> branch on GitHub, the content of the <code>staging</code> branch will be deployed and the deployment can be accessible from stg.example.com.<br> The deployment of the <code>main</code> branch can be accessible from example.com as well.</p> <ul> <li>Project name of Cloudflare Pages: example-prj</li> <li>Name of the Git branch corresponding to the staging environment: <code>staging</code> </li> <li>Domain name for staging environment: stg.example.com (You can also associate different apex domain like example-stg.com.)</li> <li>Name of the Git branch for production environment: <code>main</code> </li> <li>Domain name for production environment: example.com</li> </ul> <h2> 1. Create <code>staging</code> branch on GitHub </h2> <p>Create it as usual.</p> <h2> 2. Add stg.example.com to Custom Domains of Cloudflare Pages </h2> <p>You can see Custom Domains tab on the Cloudflare Pages dashboard.<br> Add stg.example.com from the tab.</p> <h2> 3. Fix DNS so that stg.example.com points the deployment for <code>staging</code> branch </h2> <p>By adding the custom domain to Cloudflare Pages, the new CNAME record stg.example.com which points example-prj.pages.dev is automatically added to your DNS.</p> <p>Modify the DNS record value so that it points staging.example-prj.pages.dev.</p> <p>Note that you need to enable Cloudflare CDN (orange-cloud) for stg.example.com. If you disable Cloudflare CDN (gray-cloud), stg.example.com does not point staging deployment properly.</p> <p>(Therefore, I guess you cannot associate domain with staging deployment if you use a DNS provider other than Cloudflare. See next section for possible workaround.)</p> <h2> Why this works? </h2> <p>Actually, each deployments of the non-production branches are accessible with BRANCH_NAME.example-prj.pages.dev. We just associated the custom domain with it.</p> <p>As I mentioned, if you use a DNS other than Cloudflare, I guess you cannot associate custom domain with the staging deployment. You can use staging.example-prj.pages.dev as the staging environment.</p> cloudflare cloudflarepages