Basic Web Deployment

This is a short introduction to help you deploy and test web page(s) on local web server (XAMPP) and public web servers (Google Cloud Platform and UVa Home Directory).
(Please tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 22-May-2022)

Deploy on XAMPP

XAMPP is an open source package that is widely used for PHP development. XAMPP contains MariaDB, PHP, and Perl; it provides a graphical interface for SQL (phpMyAdmin), making it easy to maintain data in a relational database.

If you have not installed XAMPP, please refer to XAMPP-setup to install and set up XAMPP.

Assuming that you have already set up XAMPP

  • Start the PHP environment ("Apache Web Server")

Reminder: be sure to stop the server when you are done. Leaving the servers running consumes energy and may later prevent the servers from starting.

To deploy your web page

  • Create a directory for your project in  XAMPP/htdocs/ folder
    Put your HTML files under  XAMPP/htdocs/your-project/
  • Create a directory called "images" (or assets, or any name of your choice) in  XAMPP/htdocs/your-project/
    Put any image files in  XAMPP/htdocs/your-project/images/
    Think about how you would like to organize your files for future access
  • Create a directory called "styles" in  XAMPP/htdocs/your-project/
    Put any style or CSS files in  XAMPP/htdocs/your-project/styles/
    Think about how you would like to organize your files for future access
  • Create a directory called "js" in  XAMPP/htdocs/your-project/
    Put any JavaScript files in  XAMPP/htdocs/your-project/js/
    Think about how you would like to organize your files for future access

To test your web page

  • Access your web page via a web browser. Your URL will be similar to
        http://localhost/your-project/yourfile.html
  • Access the index.html file via a web browser. Your URL should be
        http://localhost/your-project/index.html   or  
        http://localhost/your-project (to improve the usability)

Deploy on Google Cloud Platform (GCP)


Redeem and use your Google coupon. Do not enter your credit card. (If you have not received an email with the link to redeem a coupon, please notify the course instructor via email.)

To deploy your web page

  • Assuming that you already have a Google account. Go to the Google Cloud Console and login to your account
  • Create a new project for your web page(s) or website
    • Click the "Select a project" dropdown icon (next to "Google Cloud Platform")
      dropdown to select a project

    • Select  New Project
      dropdown to select a project

      This will prompt a screen allowing you to create a new project. Enter your  Project Name (e.g., webPL) and projectID (e.g., cs4640webpl). Be sure the  Billing account is associated with the Google coupon you redeemed. Then, click  CREATE.
      image showing how to create a new project

      Note: If you use virginia.edu email account, please be sure to select virginia.edu for Location.
  • Create a Google Storage Bucket
    • Access the project you just created
    • Click the Navigation Menus (a "hamburger menu" icon, top left of the screen), then select  Storage
      image showing how to create a bucket

    • On the  Storage/Browser screen, click  Create bucket option
      image showing how to create GCP bucket

    • On the  Create a bucket screen, enter your bucket's name (for example, webpl-demo). The bucket serves as your root folder; i.e., the main context directory of your web app / website. Click  continue. You may need to click  Choose where to store your data  to expand the option.
      image showing how to create a bucket

    • Select  Region for  Location type, and select  us-east4 for  Location; then click the  Create button
      image showing how to create a bucket

    • You may access the bucket you just created from the  Browser screen
      image showing how to create a bucket

      You may use to select columns to be displayed.

  • Deploy web page(s)
    • Go to the bucket you just created (click on the bucket name, webpl-demo)
    • Select the  Upload Files option to upload your file(s) or the  Upload folder option to upload your folder(s).
      image showing how to upload files and folders to GCP storage

      The folder structure should be consistent with how your web resources (html, css, js, images, media, data files) are organized.

To test your web page

  • To make your page(s) publicly available, you need to set the bucket's permissions. On the Browser screen, locate your bucket. To set "Public" access, click the "three-veritical dots" option on the right,
    image showing how to set permission on a bucket

    Select  Edit access
    image showing how to set permission on a bucket
    **Do not export to cloud**

    On the  PERMISSIONS screen, click the  REMOVE PUBLIC ACCESS PREVENTION button
    image showing how to set permission on a bucket

    Select the  ADD PRINCIPAL button
    image showing how to set permission on a bucket

    Enter  allUsers in the  New principals textbox and select a role  Cloud Storage,  Storage Object Viewer, then click the  Save button.
    image showing how to set permission on a bucket

    Now, your bucket is publicly available
    image showing how to set permission on a bucket

    If you need to delete members, for example, enter  allUsers in the  Filter  textbox. Once the member is found, click a "trash" icon. Alternatively, you may select the  Role / Principal >> Storage Object Viewer  to locate the members to be deleted.
    image showing how to set permission on a bucket

  • Get the URL to your web page by clicking Public to internet or Copy URL. Then, open the page on a web browser.
    image showing how to test a web page on locally

    Alternatively, you may click the file name. This will lead to another page containing the URL.
  • Access your web page via a web browser. Your URL will be similar to
        https://storage.googleapis.com/your-bucket-name/yourfile.html
    (for example, https://storage.googleapis.com/webpl-demo/bootstrap-customized.html)


Deploy on UVa Home Directory

To deploy your web page

  • Login to your account (UVa Home Directory)
  • Upload all your files to  myweb/html  folder

To test your web page

  • Access your web page via a web browser. You URL will be similar to
        http://people.virginia.edu/~Your-UVA-ComputingID/your-project/yourfile.html

Note: This option is simple and your web site/page will be attached to the UVA domain (which can help with the search result page). However, it is not recommended for your web app as its support is very limited.


Copyright © 2022 Upsorn Praphamontripong

Released under the Creative Commons License CC-BY-NC-SA 4.0 license.

Last updated 2022-05-22 16:15