10

Deploy DB driven Laravel web app to Azure App Service running on Linux NGINX web...

 2 years ago
source link: https://blog.medhat.ca/2022/03/deploy-db-driven-laravel-web-app-to.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Laravel is an open-source PHP framework designed to make developing web apps mush easier and faster through built-in features. It is based on the MVC design pattern.

In this article, I will show you how to deploy a Laravel application to Azure App Services. The Azure web server is NGINX running on Linux version "Debian GNU/Linux 10 (buster)".

Assumptions

The following is assumed:

  • You have Git, PHP and Composer installed on your computer.
  • You have an Azure subscription
  • You have a GitHub account

Getting Started

We will start our journey with a very simple Laravel application that lists some data from a SQLite database. Go into a working directory on your computer and run the following command from a terminal window to clone a GitHub repo:
git clone https://github.com/medhatelmasry/laravel-azure.git
Once the application is cloned, change directory to the cloned app and start your app as shown below:
cd laravel-azure
composer install
php artisan serve --port=8888
The web server will start on your computer listening on port 8888.
Starting Laravel development server: http://127.0.0.1:8888
[Sat Mar 26 15:36:29 2022] PHP 8.1.2 Development Server (http://127.0.0.1:8888) started
Point your browser to http://localhost:8888/ and you will see the following page:
AVvXsEh2Sb302vN2Jn-VpoeLLkZ5nnMDs30N-jTcnpXdOvi_EfSogtCsKeRWt2PYwc-Ij30ThyUwvBVxL2omfi0DyFoF5A2gVjThPvoYQPTJNOe2e2LdtzAgxo9EQwlvz1u4rVtfFUY2F98h-SjuxdID2JeQ9XD9xhjlXg59pZkngagX6246QzB54BMdrwLCmA=w400-h231
For demo purposes, data is pulled from a SQLite database file at database/autos.db
Disclaimer: It is normal practice that the .env file is excluded from being pushed to source control. If you look at the .gitignore file, the line pertaining to .env is commented out because there is really no confidential information in this file.
Create a repository in your GitHub account and push the source code to it.

Create Azure App Service

Login to your Azure account by visiting https://portal.azure.com. Enter "app services" in the filter field, then click on "App Services".
AVvXsEhIXsIgRpOOgkLyarKQJEnGFF4Z0kdFx2D5v2UPxNEusBNOZDSAGQ1V7gT1jIxCrnmU-myFM3pvQDl6xiiXgYNG2aX-cYFdk9Z2gVQSC8FZWKQL_WK8qEH4JzOdTlrYL9OIwwZ-ICvH9RL-dFH4Me-XXas2IMDyerrrkFbcdCgcv9D9laIohwr0xfVyWQ=w640-h160
Click on "+ Create" on the top left-side.
AVvXsEgwgTM1MCh6rg8bBo1zBAU6olcg9FMJCcL9DkBAlk0ylYXW9-HxRROgM3MANLDYZm35k1cOujmidOgPp_kjuoZ8oy5A5adzzuQB-UykCBXNgxmKnIvuxJJSknPaXE2tsY5tZeUzqOSYc98ISwz4MVX7jv6TN-cH9beXfU6P0yZ3eLIs6F0Cg4D7Ye8Oeg=w400-h290
On the "Create Web App Page", choose. your subscription then create new resource group.
AVvXsEhhqTLGwSrnmxuqTjm80WlIVKzcKiy3hhPjcGK11yjGPRlFzZNkxavwQSBs5zX3c5NRDZvgfa4tzP4f0n-9_nIsjzlp5Re0iGgDOwF7h58Q_4VtT1DcPpg9xXfj6BBb2XSBHVtPJ7nFCqWiHzDbqBGTlusavHvyGwndxlMN-dhQZcJtVwzeCFNTPTwpCA=w400-h194
Give your app a suitable host name that is unique.
AVvXsEhSfkkGxlNO6T1s0wjf7eI2_UPjlrB91HlpFsD0EuVuEclaxgCumJ_t_ihK7a6bZ7sPWMQB7Qf2Atk0XhYb83AdaPdDR8bPgdM7S7Z-OjrYZVQeDdOBzXK1gaFPO7I2U9lnr_Va9w8MPHNVA2VEOTRUeRKTeUBcZPYPcFf1CX5v4YUb6dS2O_HALJw1BA=w640-h46
Next, ensure these settings for Publish, Runtime stack and Operating System:
AVvXsEild98dKaNofKAwftAqvAameDDrHRpL-KqLylQBgcf4Ai4_9gbQAnLd3oToDZJkXqK0Fr9Nycm0ltsIL6ISic8lrpKurIr_YLI7vyiCqcS0lgSDjxeYUaWvnqVfX-RN01-FNKkCeq9mOvEGdTzSjcVSgTMAHvxFT-959taLDnLRZDfilBDgrZbr1Vw_aA=w400-h60
Choose suitable values for the remaining settings based on your individual preference then click on the blue "Review + create" button:
AVvXsEhT420N8HfJvnnfjku-b6AZADsqsMevZgA_fXWRZBLF80ZD4mpAcUcOPbalLaHrW2smGSX_6WGhzpqJxEYrYGVaIaDafJyWgbc_nRpM8ebBM5e9ZBHNcWEjJSk5UhChWiU9mbuD-xbUmVSLctPkzSskNCM7mAOSL5j6pc7Q8gd48QyfqTL1CBQCEFrtQw=w400-h249
Click on Create button after you have reviewed your. choices.
AVvXsEiUkEIckY12lY9H1ddItkxz1a84XRIm2XwaqCm6pj3ElN7mo-n3P1WmDGKauKp3Ad6f6Ujp66p7f1mIiE6evYqgrRgOpFFeG7cs-LI4Fr23f0JGJiWipQZrMvADPud-Ww-LgeJu5OPKyknZAHjj7QF_FpLqwBu0JBpZ7tOzHmTCkEspGJJGm93GHEoV7Q=w385-h400
Once your app service is successfully provisioned, you can click on the "Go to resource" button.
AVvXsEg07JHcuLttln5QWNIWokVEEQy-3XnZcHzU-8den5wyiJkbgP7egAcnxQyKBJxUecJeL31u8Jq9w3qzvBjWgrXaryIpAxsfXAdEMrzadUfJxpRZyD9Sk8H3rO_wz8rd84E66er7Z89T3V8UH9XdtjH6toSSVGsjUFnW1UhiDeF5Wc28ui92D3f9ItGleg=w400-h210
You can see a default web page to your web app be clicking on the URL link on the top right-side.
AVvXsEgnhtismZJzHM-x1igyZvyNel77fSuzrS3q_3_Z--2bJUDVi54KJ5PMwmM2IFM_3wqWVo0eHr_iZwDeZOdRT_7MqxoOvAMyjfnKGxnplQhebdeiYm6x_ARNx2bK72--JT7lLZeQFqlnKb_GeoyW42VvXvCeXykchoMsYhaeNqzZ3Wv-WJjCvTeixJL1Dg=w640-h192
The default page looks like this.
AVvXsEjAicWmgtgJI9OSmGcxCoUdF_gJcGlLWFsUiIGpsIRKCzCoYvV4XXFbf2uoo_pDqXxSiS-bn2aRK0HbApRfLvSPHb9Y9fJ30tj8Lwu2dtJMFsrWiHr2cuxNBJg03BiHBAzXGMDZ8lMiPI4RAIakzIqpKKu_33WGI29dPwIA-HohTSfQFbGtqFxSmNFqGw=w400-h288
\

CI/CD pipeline

Of course, we want to deploy our Laravel PHP site from our GitHub repo. An easy way to achieve this is to use Azure's "Deployment Center". Click on "Deployment Center" in the left-side navigation.
AVvXsEghMSPYFrQj4r9h5eiC2rGH64fTOp5PmC_nk2mr3h4VNz8LtP4KyDyO2cTLXNRaClPaw_g19zlHPayvR43bj_lzUbuuJiLK0h2TkxTMjEmsoiwRdZWYE02uRgNtSkJHVPOG9NNkaYfH0e4csNvaeEZZi3Zb_K47GOwPSZ_SDPMITUnoXRuLoxed0hMZjQ=w187-h400
In the "Deployment Center" blade, select GitHub.
AVvXsEhBiQAl-jpsnhGXnyU_MxOf5C_49mNw5NxBf1khv5JDFG_c5JrmalXenNdasIJ0sr-ZRjgX-Ua7DCwZGkba6YnWWyA5R60lJzJ_EgD_iDrLjVhL1GrPjwtNY6rewW_ksAsFk_EdOv7FEvrFrEQnwRegBZo8vbadOV5vVI2W0HuYgd2QOJ29kAK9axo6Kg=w400-h258
If this is your first time to connect Azure to your GitHub account, you will be asked to go through the GitHub authentication process. Thereafter, select the appropriate GitHub Organization, Repository and Branch. My experience was:
AVvXsEiqvpMIdkHEeXrNYimL9GJ_pIxVlkRRGpyEWaeC6wC1afafjKpdUg81q34Vk0_HCBKBXAK_OleUrcBOXIiq1M58F_6Tfol_IHx79wn25X7eEYSWa_WTpmb_tTIEyUnyLES8BYbruARryythXIWLKJmRsRACG8OhFG-kln3h4h0BBwR3eonrBRnNTA5mTw=w400-h223
Once you click on Save, the deployment process commences.
AVvXsEjt37l5Rxb09vO0beNAMEqJqJPGyMEfJ8-pmYA_QF0mD5TH64REYtc0k9VPfbQu4_1YvA6LQ1mYiGQX0r3zVpzLF69YoxE3gX7lP6lHXIzZiQLpevfsDg3ycpqT1v3N5SbF1IPihIk9nZreJe9lYTh7BGwPYz0PuhEvNrmaKV7Qq1akT7VPzytqFs8hoQ=w640-h56
To go to your GitHub repo, click on the main link under Branch.
AVvXsEgSJDnjHtJoZ3i0XvX2LlAf7rjLV7ueIAOA8txfdkBk7O9qW0uCaXQDmQjedywqVUVC5CqWTaqguOXdr9LD7kxURI3U4qxnVez1JHjhBodyT7lBLONcKNsF60Hpjyg1h6kri5uyCAv7YISVjDDaj75IImUhNYQj2a1ZQSIzBGtCTMwHFsPy1GMlkTskqQ=w103-h400
To see the deployment in action, click on Actions in your GitHub repository.
AVvXsEjkv1o9xAd_16mQ0lZdO0mpZDbcITuTjHz52OfXsF4RPBo8mlGgYQ4C8oduaoBwrSaw_q8WR5L-mi-bhQenLIklxWna-rp2z3oi4hYAms7XWsziuEN9MU_FtxU9jANCSn6Bshqjoc37MOgsHm2Y5jpOjQ5iOPMxidDEDdD3JTATWyvlVrPvnNhTaXSqRw=w640-h50
Click on the workflow in progress.
AVvXsEhD8GxkQysa6touKSuT2UdszpKl5zdB5P5FwfELmlPFFmgOe-SZarieiltessU9Xf7ySeOPGVAQB3iN3L2a8BLBqZ1jCd8JDfsdKhm5-oepWP4MKlGLR7ODkA9EVYo-ZKvChEmoLqfDjpmyvphEus-Je1yqgu53MiPPhp8-PWsvhH_1WZ54XCGjVdSR-A=w640-h154
The workflow will be going through a build and deploy process. 
AVvXsEiWOwx5T2pkQfPtGAzAXOk97Lz71P23GUTjpYrGwkciUrkrr8ViprTYqTHpjv1oGgtSfkUFEUntIXY_r_OWAzDmYF3bn7wiATu909hYX5T54M5woj5yzI5o7ZIxWdiUBp5kJn7afTtstwM2sXQ_insgri2GBZZ8BiSVk_sz5sH75jUcpSM7MkWLLoxnwA=w400-h221
Be patient as it takes about 15 minutes to complete. This is because during build the command "composer install" is executed. This produces a multitude of files under the vendors folder, which are thereafter sent to Azure. Once the workflow is completed, your GitHub workflow page will look like this:
AVvXsEgHXtRxhoOv_eYreuq4ng4J5HZXSswk7L--lp98tjNZLINIl3b6HqmhIYTji3i2FfgoivAq7XKVujeKTqFnrCzhf-BKog3QzI1XON1mhpZOEqKsQjIvwRUT6B4TXW5f3QYDPLlphgCEyXbanE0YnSm9A5SdeCIf7Cff75hzzd33nYSLwwgcjq1cTbBivw=w400-h134
The workflow files were automatically generated and placed a .yml file in the .github/workflows folder with your source code.
AVvXsEg16d730rkgLuxdbUaX8He-bcPKfSkxmje-LOWpQ4is3Iax9zGLKa1hwxPFT7Ialvo9WtHxeyrSUnxqRSfcSKSlrYHrI1C0bA6R_oPYmFXuYUJ5C9wgQcx_fjws5xMnVkZQiRbPEwlROfwPLvx5ikmk6Vt7UtT2bTp2Uv2gghlwU5uP3kdcm9z2l1hj6g=w640-h229
You can click on the .yml file to see what the file looks like.
AVvXsEiClZ8dJB9cdQk6qNfF2I0TEBCrxno1aon6M5V13rtfkH-aV64HwOAXxwkO_Y3itpprogT4npb_gv1MqSaPf58zC8Z711ZTP1707UdBjJLmBChUh85YBnHDCcanQbRNPIsD89-EskY_4BLvq4oiplsy_QkKqYKLy6ANx3wCtbAaTzZewHL_No0y5ivsMw=w400-h368
At this point, it is worth going back to the code on your computer and doing a pull of your code so that you get a copy of the .yml file that was added to your source code.
AVvXsEhaqNZ246TJIx2BsaGSJk-lGVIPxvIlQUXZwAabscUySTOJaL33Ft0D67VPTYPq-lqLX017p7BWge5xbokIUe_XtTP4IfDOY7f6vxwhC2MsbBqQsUxPQtw9GsM7GqOW2fa0-x8HiIcHx3XRRlpehb60D03qxC4mjTmHZGIa42syDFKWwehwuGtrb3-DeA=w640-h214

Configuring app on Azure

Back on the Azure portal, if you refresh the default page of our web app, you will experience a "403 Forbidden" message, which typically means that the root directory has no welcome page.
AVvXsEiOylBIIELg-FrzRCkEvPxk45FoVxTU2S_DFbPMa7OmbW2LQjWl28VIScxclPqhbsRNWzIfc-ObQRmu3Sgf2iQNAV6EYaieUJJjEEka8Jn5j4vyqasYKELxxdzHEfPRLM08E92zLj8uAzHPXfBDAY_FsqMFrWA3u1Y6ag9t_5bXlG0VDey50t8fwmFBPw=w400-h290
AVvXsEghZe7yS3pvs0DbZJ1Dk_M9wUUwk3kKKEW1EpZ4gSfCo3wGW4bW4d86KT3_2R1Be-yiw5_ZPu-OFfw9TGO2axZdPEcS0lQPfF-oYm3mv6RUSAC87GKisD4WArsFpAN3-lAghZA6RdYw04E2cONi4G3kXngn--C1_oN3jbtTWWn9urfjhnfrapjKRFSgWg=w400-h81
This is understandable because the main index.php page in Laravel resides in the /public folder. THis means that we need to do some configuration work on Azure. 
In Azure, enter the term advanced in the search input field then click on "Advanced Tools".
Click "Go -->".
AVvXsEgnXfqGiaJW2LAcetmzgR29yxkcv0L_t-i-qDXAX_G1Zoz7OIFjTcswLyf8pvS0-_YSdfr2IDwMN8bYLNjOpdBQrPKzEAUg7t6QxXh710cZBuK4rvxBc00aWrJDA88gGxov4zGLz-HUEX4vZ6SQtrkhaHogX-kemSq7t5MJ0Q_hwVdqYYLieKN0XfMVfw=w640-h158
A page opens up in a new browser tab. Click on SSH on the top menu.
AVvXsEhnwT_YM_DPLPJBlkpwJQP2T-hX_aBD54YlPsGmTDUslvk_iaG1wB7Tguw4npBvifrOUY5H_BnGs1KyZzhD2IdpigAPD_5e6YmG5u7Xvga5TMIslFac0x0B5zVpEyaV2TKXncAKG4bXMdmLz1Dbc2L1cqHSPoGJtEQ8Q-SUGyFip1hjv8VS_PBmlFnh2w=w400-h330
A Linux terminal window is open.
AVvXsEgbW4igJ4mCCfHk01u9LoHn2gUStsZ1RHIUrfptde8HE3kyw2rjHUan9TMDT98QoNySLq4D--fKLvwrq3RTFZvGcqt7McsOnEmZr8CTrPhjosTbFfGzyXGvtb_7d55X-Wu6zcNYO4yoXGYKHslMK_fzObL05KgDte7HgRcHD8UfI9yncu9rC1hTxCKU0Q=w400-h233
If you are interested to know what version of Linux this is, enter the following terminal command:
cat /etc/os-release
The value beside PRETTY_NAME is the Linux distribution and version.
PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"
We will make a copy of the existing nginx configuration and place the file inside the /home/site directory with the following command:
cp /etc/nginx/sites-available/default /home/site/default
Once copied, edit the /home/site/default file with nano or vi. I will use nano.
nano /home/site/default
Make the following changes:

FromToAround Line # root /home/site/wwwrootroot /home/site/wwwroot/public6

location / {
   index  index.php index.html index.htm hostingstart.html;
}
      
location / {
   index  index.php index.html index.htm hostingstart.html;
   try_files $uri $uri/ /index.php?$query_string;
}
      

10

AVvXsEgXCad3ryzMmiLKV_zRZjdLSNmih5OrHy75kTy7mnTGDgKAJi9MxZ9XlltuQ-1hvggq8b-kTDKyrsmXLEquNoLmMSoHlCE2xiwMK76U-0KosQtmuTeRFFQdZ_V76VbQzdwtL5xFhVTEjFrIijPqFrJTCSz4jxF4hDjD5Qc3FCaS_88r_qe1K0cNuxeWlw=w335-h400
In nano, hit CTRL X to save, enter Y then hit return.
We need to create a bash script file that overrides the existing default file with our customized version, then restart the server. Change directory to the site folder.
cd site
Inside the site directory, using vi or nano, create a file named startup.sh with the following content:
#!/bin/bash
cp /home/site/default /etc/nginx/sites-available/default
service nginx reload
We will make our bash script file executable with:
chmod u+x startup.sh
While in the terminal window on Azure, let's visit the folder that contains our Laravel application. Do this by going to the wwwroot folder.
cd wwwroot
This reveals the existence of all the files that we had on GitHub plus files in the vendor folder.
AVvXsEh_LwUWWnfvUitVZWxyisBXrEElFx9vjS0_GRWjFJKquffWbm6k58DLYHdJSs1LfF8yz_YqLbYAk3ssuem6D8C51Vw0H3z81tZ346yfpH_LMYP8aqgjZ461Lz-KDjEXwSOIo_4l9osFmPlneuoYcvO87s4EmIK_2Ys1V2EiVmtn6qAC9hkmGKknQh131Q=w640-h38
Navigate back to your App Service via the Azure Portal. Select Configuration in the Settings section.
AVvXsEg84d2OIlNQJXno1Y1yo9F3c-dmc8R6SKEqWHGVS1uQtLtpK88KSoqBfLwxJzU5BgdFui7aVk2BVrxsv0yZ1MWVrAJ7XiZrHyuzMwDuZ3jxg4l2DnOFajuDreaBkWPvj80o22a22AkyVYow08K7t5UB5dpXTaAyTpWtn_JlPFc9n-k4Afs4T0T7g5Pn8Q=w160-h400
Click on the "General Settings" tab, enter "/home/site/startup.sh for the "Startup Command", then click on Save.
AVvXsEjjIrpw2ETl06YDQ7dk3U-jrjZ7N9-EiKzkl71Gnkza_92k28D3SfB7dEVEIFlFeeHTq2akUKhV6NG5biSm8SAPLX2H1l4D6Fx4rbRXWNmkGN7wy347p3i1QI1GXQ2Km938lWDacrBk6d6CHoP7xdoDgzQf8JjjTPAOZ_6Y8ohNyWZoogwq-SHcoPza4w=w400-h306
Click on blue Continue button the the "Save changes" prompt.
AVvXsEjHv88S6h52i5eHeHeoUU_DXObDfDiT6Zir1hUC2MydL4rlHFO6WyNjK4XrprPoYzcKh941SvCdMFz5Gh-nKkUsZ1pBdh0xUq3Vad31jEVaOjN543bFN23sKuiYHBC2b-zOnuJIH1zVRAFBUMmG3ziXuyEfe64D2Kj_CEqzFotpisSzzVan81NK5J6VxA=w400-h104
Now, when you refresh the website, you should see that our web app is working as expected.
AVvXsEhA_fq9H9QOP9CfzbiVgVsrLknsUzSx5fiOSO82spKpkCyFabcOe_Q0CjRTeTGReobl2YXykxABunX4-y4rv885QmZ7w0pmF9vGh2epKEcTZUdpX_qnDhoGPgXw4GCP75763Ur-dGMKGlEAamLd__Y1GfQNHc_wW7Ijq6nhLr02E4R8CMmQJ6UGXvXrEw=w400-h165

Conclusion

We have successfully deployed a database driven Laravel PHP application to Azure App Services through GitHub. I hope you use the principles you learned in this tutorial to deploy much more interesting Laravel applications.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK