Installation and Configuration of Nginx and PHP on Mac

author-image  By Dhiraj, 13 January, 2018   4K

In this tutorial, we will see how to install Nginx and PHP-FPM and Mysql on Mac and setup these environment to develop application using these technologies. We will make configuration related to sites enabled and sites available for virtual host using Nginx and make use of it to serve html and php page.

Nginx is a high performance web server which is also used as a reverse proxy and load balancer.Similarly, Mysql provides persistent storage and PHP is a server side scripting language that can be used to create dynamic and interactive web pages.Combining these 3 technology stacks makes LEMP stack and let's setup this stack today.

Pre-Setup Checks

Mac provides a beautiful package manager called Homebrew that provides easy installation of software on MacOS. It is a tool similar to apt in linux system. It is always recommended to install any softwares with brew command to avoid permission related issues and it also makes installation and un-installation fairly simple.Check if it already installed first using following command.

brew doctor

In case it is not installed use following command to install it first.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

You can use following command to update it if it is already installed.

brew update && brew upgrade

PHP Setup

To install PHP execute following commands in the terminal. The first two command register PHP repository and the last command installs it.

brew tap homebrew/dupes
brew tap homebrew/php
brew install --without-apache --with-fpm --with-mysql php70

If you will look into the terminal, you can find all the necessary instructions to launch php-fpm on startup, PHP control script location and how to start php70 with brew.Following is the screenshot:

phpsetuponmac

Nginx Installation

brew install nginx

It will take couple of minutes to complete the installation process.In the terminal you can find all the configuration location and instructions. All the files and folder and related to this installation will be available in the location .To start the server you can use sudo brew services start nginx. The default port on which it is running is 8080. We will change these configuration to some other port as our tomcat might be running at 8080.

Nginx Configuration to Serve Html

All the nginx configurations are available in /usr/local/etc/nginx/nginx.conf file and now we will start making changes to it's configuration file to serve html page. For this change the existing configuration under key server and location. The server key holds the port number to which nginx will be listening. By default, it is 8080. We will change it to 8090

Also, while installing nginx from brew, the default location of static files such as .html file is configured under /usr/local/Cellar/nginx/1.12.2_1/html and this can be changed to point to your custom location. In my case it is /Users/b0202781/Documents/work/workspace/www.To make these configuration, we need to modify the existing nginx.conf file as below:

Original Configuration
server {
    listen       8080;
    server_name  localhost;


    location / {
        root   html;
        index  index.html index.htm;
}
Modified Configuration
server {
    listen       8070;
    server_name  localhost;


    location / {
        root   /Users/b0202781/Documents/work/workspace/www;
        index  index.html index.htm;
}

Create a custom index.html file inside /Users/b0202781/Documents/work/workspace/www and reload the nginx using brew services reload nginx.Now invoking curl command curl -IL http://127.0.0.1:8080 should load your custom html page.

Nginx Virtual Hosts Configuration

Till now all the above configurations are very simple but with Nginx you can do much more.We can configure Nginx to handle multiple virtual hosts.There are 2 things here - sites available and sites-enabled. All the available sites configuration resides in sites-available but those configuration which are present in sites-enabled are only served by Nginx.Actually, sites-enabled contains symlinks to the sites-available directory and you should always modify sites-available configuration and these changes will automatically reflect in the sites-available. To accommodate these changes we have following directory structure inside /usr/local/etc/nginx

nginx-directory-structure

The folders of interest here are conf.d, sites-available, sites-enabled and we have our configurations in nginx.conf. We have corresponding configuration files present inside sites-available and sites-enabled and we have include these configuration inside nginx.conf file.

nginx.conf
worker_processes  1;

error_log  /usr/local/etc/nginx/logs/error.log debug;

events {
    worker_connections  1024;
}

http {
    include             mime.types;
    default_type        application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /usr/local/etc/nginx/logs/access.log  main;

    sendfile            on;

    keepalive_timeout   65;

    index index.html index.php;

    include /usr/local/etc/nginx/sites-enabled/*;
}

Nginx PHP Configuration

In the sites enabled folder we have a configuration file - default that has configuration PHP. But before that we will tell Nginx about our PHP-FPM configuration. While installing PHP-FPM through brew, the default port where PHP-FPM runs is 9000 and the same need to be configured as follow.php-fpm file is inside conf.d directory.

php-fpm
location ~ \.php$ {
    try_files      $uri = 404;
    fastcgi_pass   127.0.0.1:9000;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include        fastcgi_params;
}

Once this is done, now it is time to configure our sites-available. Following is the configuration present inside sites-available directory. Check the location we have configured here.It is the location of the same file while we configured earlier for PHP. Also, we have our PHP workspace inside /Users/b0202781/Documents/work/php_workspace/

default
server {
    listen       8090;
    server_name  localhost;
    root       /Users/b0202781/Documents/work/php_workspace/;

    access_log  /usr/local/etc/nginx/logs/default.access.log  main;

    location / {
        include   /usr/local/etc/nginx/conf.d/php-fpm;
    }

    location = /info {
        allow   127.0.0.1;
        deny    all;
        rewrite (.*) /.info.php;
    }

    error_page  404     /404.html;
    error_page  403     /403.html;
}

Once these configurations are done reload the Nginx configuration using - brew services reload nginx and hit the url - localhost:8090/info to check if php is configured correctly.

php-info

Also, we have index.php in the same folder php_workspace which can be accessed at localhost:8090/index.php

php-index

Conclusion

I hope this article served you that you were looking for. If you have anything that you want to add or share then please share it below in the comment section.

About The Author

author-image

Further Reading on Node JS

1. Rxjs Tutorial

2. Angular Material App

3. Building Angular Application

4. Typescript Tutorial

5. Nodejs Basic Tutorial

If You Appreciate What We Do Here On Devglan, You Should Consider: