Hosting static web on Firebase Hosting by using Docker

Using Docker to deploy static web on Firebase Hosting

Hello.

In this post, I will guide on how to deploy your static web on Firebase Hosting by using Docker.


The reason why I use Docker to deploy my static web is that I don't want to deal with NodeJS dependencies mess and other things. I just want to upload a new code to my web, and that's all. Then just remove that container once my code is uploaded.


First of all, I'm not going to guide you on how to install Docker and the required dependencies to use Firebase in your machine. In this post, I assume you have installed Docker in your machine, and Firebase wouldn't need to install it because we will use it in our container.


1. Head to my personal Github to pull Docker image to build our own Firebase tools.

Link:

 https://github.com/Tester2009/Docker-Images  

2. Clone this repository to your machine;

 git clone https://github.com/Tester2009/Docker-Images  

3. Once clone complete, head into directory Docker-Images/Firebase_Tools/

4. Now time for you to build this Dockerfile to make a Docker Image.

 docker build -t firebase_tools_container .  

5. Once the build completed, you can check your image by using the following command.

 docker images  

6. Let say your development directory is /home/hakase/Development/, and you want to mount it on your container in directory /Dev/Here, you can run the following command.

 docker run -it -v /home/hakase/Development/:/Dev/Here -p 9005:9005 firebase_tools_container  

7. Now your terminal should inside the container. Go to directory /Dev/Here by inputting the following command.

 cd /Dev/Here  

8. You should be able to see your codes here. Now login to Firebase Hosting.

 firebase login  

9. You should be able to see like this. Copy the following links and paste them into your web browser. It will require you to log in to your Gmail which you use with your Firebase.

10. It will require you to click Allow. Once you click Allow, you will see this in your Terminal.

11. Now run the firebase init to initialize it. Then choose Hosting by using the arrow key, press the space bar to select it, and press Enter.

 firebase init  

12. Now choose the Firebase project that you want to use.

13. Set public for What do you want to use as your public directory?,
and set no for Configure as a single-page app (rewrite all URLs to /index.html)?

14. You should be able to see your file (index.html), firebase.json, and public folder. Move your index.html to public folder.

15. Now time to deploy your static web to Firebase. Run the following command to deploy:

 firebase deploy  

You should be able to see this.

16. Now you are done. Your static web has been deployed! Check out your given hosting URL. 

Footnote:
In this post, I use https://codeformatter.blogspot.com for formatting my command.