Tag: web developer

  • Vagrant and VirtualBox for local web server

    Vagrant and VirtualBox for local web server

    When you seriously start working as a web developer, a proper development environment is a must. In fact, there are no suit-for-all solution, but I recommend my set up for those who have the very first step in this path (web developer): Vagrant and VirtualBox.

    Why Vagrant? Why VirtualBox?

    They’re free, yet useful. Maybe not the best, but it makes it work.

    Production-like development server

    You can build that server like a real one, with the same OS, softwares, and other configuration,… as much as you can. Actually, there are still gaps between them, but you can reduce those without change your machine too much, says, you don’t have to change your laptop OS to a linux distro so as to find the bug that happened in the live server.

    Share the same development environment among the team

    If you working in a team, you may run into the problem: my code run well on my desktop, check yours, dude!

    Because you’re (all the team members) using the same image, we’re having the same environment no matter what OS they’re using (macOS, Windows, CentOS,…). It your code works, it works! You don’t have to wait to upload to a shared server for the team to test all your works. It makes the process smoother, painless (well, actually, less pain).

    Let’s get started!

    Download Vagrant here.

    Download VirtualBox here.

    Install all of them, of course!

    Make your own project environment. Save this as Vagrantfile under your project root directory. Content as below:

    VAGRANTFILE_API_VERSION = '2'
    @script = <<SCRIPT
    Install dependencies
    LC_ALL=C.UTF-8 add-apt-repository ppa:ondrej/php
    apt-get update
    apt-get install -y apache2 git curl php7.3 php7.3-bcmath php7.3-bz2 php7.3-cli php7.3-curl php7.3-intl php7.3-json php7.3-mbstring php7.3-opcache php7.3-soap php7.3-sqlite3 php7.3-xml php7.3-xsl php7.3-zip libapache2-mod-php7.3
    
    echo '<VirtualHost *:80>
    DocumentRoot /var/www
    AllowEncodedSlashes On
    Options +Indexes +FollowSymLinks
    DirectoryIndex index.php index.html
    Order allow,deny
    Allow from all
    AllowOverride All
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined 
    ' > /etc/apache2/sites-available/000-default.conf
    service apache2 restart
    SCRIPT
    
    Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
       config.vm.box = 'bento/ubuntu-18.04'
       config.vm.network "forwarded_port", guest: 80, host: 8080
       config.vm.synced_folder '.', '/var/www'
       config.vm.provision 'shell', inline: @script
    config.vm.provider "virtualbox" do |vb|
         vb.customize ["modifyvm", :id, "--memory", "1024"]
         vb.customize ["modifyvm", :id, "--name", "My Project"]
       end
     end

    Create an index.php file under your project root:

    <?php
    echo 'Voila!';

    Run! (not you, the project!). Open terminal, go to your project root directory (where the Vagrantfile located) and run this command:

    vagrant up

    For the first time, it takes times to initialise the whole micro server in your machine. The next time will be faster. When the command finishes, open your browser and type this address: http://localhost:8080/

    Voila!

    Notes:
    – For those who run Windows, the command needs the Administrator privilege
    – You can change the lower port (eg. 80)