Follow these instructions to deploy the demo app to Azure.
- Open [Azure Management Portal] (https://ms.portal.azure.com)
- Press the
+
sign and search forWeb App + SQL
. Select it, and pressCreate
: - Fill in the App Name, Database and create a new Resource Group to contain all of the related resources:
- Click
Create
, and wait while deployment is running. When deployment is ready, you'll be automatically redirected to the resource group and see the list of the resources allocated for you: - Before setting up the resources, we need to create a Storage Account where the videos are being stored. Press the
+
sign, and search for aStorage Account
. ClickCreate
: - Type a name, make sure to selected the same resource group, and the same region for your storage account:
- Click
Create
and wait until deployment is ready. - After storage account is created, click the Keys icon on the top bar and copy the storage account
Name
andAccess Key
(Key 1) to a temporary file. We'll use it in a bit. - Go back to your resource group by clicking on it's tile on the Dashboard, or looking for it under the
Resource Groups
menu item on the left. You should now see all resources:
- Fork the Video Tagging Tool repository to your own GitHub account.
- Download the
schema.sql
file located understorage/sql
directory. Edit the file, scroll to the end of the file and edit the last line to add you as the first user of the tool: - Next step will be to setup the environment to host the website:
- First we need to enable access to the Sql server from your machine IP, so that you can connect and create the schema. Click
videotaggingsrv
-->All Settings
-->Firewall
and add your IP. For the sake of the demo, I'm enabling all IP range. Save your changes. - Use your favorite SQL Server client UI to connect to the SQL server. I'm using Sql Server Management Studio, you can also use Visual Studio in case you're using Windows. In case of other OS, look for Sql Server UI Client.
- Use the SQL server settings, as defined when you created the SQL server. Click the
SQL Server
-->Settings
to get the SQL server host name, and use the user and password you defined with the SQL Server Authentication scheme:
- After connecting, you'll see the database that was provisioned for you. Right-click and select
New Query
: - Copy-Paste the content of the
Schema.sql
file to this window, and clickF5
to execute the script and create all of the db objects:
- Browse to Google Developer Console.
- Under
Use Google APIs
, clickEnable and Manage APIs
link. - Select
Google+ API
and clickEnable
. - Open the
Credentials
tab. Click theCreate Credentials
select box and selectOAuth client ID
. - Select
Web Application
option from the menu and fill in the following details:
- In the
Authorized Javascript origins
, add the Url for your website. This can be copied from the web app properties in the Azure portal. - In the
Authorized redirect URIs
, copy the same Url (with https scheme), and add/.auth/login/google/callback
as demonstrated below: - Click the
Create
button.
- You'll get a
client Id
and aclient secret
. Copy these strings to a temporary file. We'll use it in a bit:
Next step will be to set up the web app environment variables. Go back to the MS Azure portal, and click the Web App icon on the resource group list.
Click All Settings
--> Application Settings
and add the following entries under the App Settings
section.
Make sure you're under the Application Settings
section and not under the Connection Strings
section:
DB_SERVER
- The SQL server host name (videotaggingsrv.database.windows.net
in our case)DB_NAME
- The database name (videoTaggingDemoDb
in our case)DB_USER
- The SQL server user name (video
in our case)DB_PASSWORD
- The SQL server passwordSTORAGE_ACCOUNT
- The storage account (videotaggingdemo
in our case)STORAGE_KEY
- The storage keyGOOGLE_CLIENT_ID
- Google's client IdGOOGLE_CLIENT_SECRET
- Google client secretGOOGLE_CALLBACK_URL
- The website URL (using https scheme) +/.auth/login/google/callback
(https://video-tagging-demo.azurewebsites.net/.auth/login/google/callback
in our case).
- Click the
Continuous deployment
option under thePublishing
option for the Web App. - Select
Github
as the source and set up your authentication. - Choose the forked repository and select the
master
branch.Click
OK
, and hope for the best :-)
After a few minutes, if everything went well, you should be able to point your browser to the website URL and log in to the tool.
Since you're the only Admin user, you'll be able to add more users under the Users
tab.
Enjoy!