Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 4 Next »

I. Server Requirements

xChat supports all platforms: Windows, MacOS, Linux.

xChat needs a VPS server with at least:

  • 2GB of RAM - recommend 4GB

  • 40GB of HDD

  • 1 CPU core - recommend 2 cores at least

  • 3 domains / sub domains

    • api.[your-domain] and point to server IP address

    • admin.[your-domain] and point to server IP address

    • [your-domain] and point to server IP address

II. Software Requirements

Ensure all softwares above are running before setup source code

Testing

From command line / terminal please run these commands to check

1. NodeJS

$ node -v
v14.16.0

2. MongoDB

$ mongo --version
MongoDB shell version v4.0.7
git version: 1b82c812a9c0bbf6dc79d5400de9ea99e6ffa025
allocator: system
modules: none
build environment:
    distarch: x86_64
    target_arch: x86_64

3. Redis Server

$ redis-server --version
Redis server v=5.0.4 sha=00000000:0 malloc=libc bits=64 build=d4ba11298acbb366

4. FFMPEG

$ ffmpeg -version
fmpeg version 2.8.15-0ubuntu0.16.04.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 5.4.0 (Ubuntu 5.4.0-6ubuntu1~16.04.10) 20160609
configuration: --prefix=/usr --extra-version=0ubuntu0.16.04.1 --build-suffix=-ffmpeg --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --cc=cc --cxx=g++ --enable-gpl --enable-shared --disable-stripping --disable-decoder=libopenjpeg --disable-decoder=libschroedinger --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmodplug --enable-libmp3lame --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librtmp --enable-libschroedinger --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxvid --enable-libzvbi --enable-openal --enable-opengl --enable-x11grab --enable-libdc1394 --enable-libiec61883 --enable-libzmq --enable-frei0r --enable-libx264 --enable-libopencv
libavutil      54. 31.100 / 54. 31.100
libavcodec     56. 60.100 / 56. 60.100
libavformat    56. 40.101 / 56. 40.101
libavdevice    56.  4.100 / 56.  4.100
libavfilter     5. 40.101 /  5. 40.101
libavresample   2.  1.  0 /  2.  1.  0
libswscale      3.  1.101 /  3.  1.101
libswresample   1.  2.101 /  1.  2.101
libpostproc    53.  3.100 / 53.  3.100

5. NGINX

$ nginx -v
nginx version: nginx/1.10.3

6. Graphicsmagick

$ gm
GraphicsMagick 1.3.31 2018-11-17 Q16 http://www.GraphicsMagick.org/
Copyright (C) 2002-2018 GraphicsMagick Group.
Additional copyrights and licenses apply to this software.
See http://www.GraphicsMagick.org/www/Copyright.html for details.
Usage: gm command [options ...]
....

7. Pm2

$ pm2 -v
[PM2] Spawning PM2 daemon with pm2_home=/Users/xxx/.pm2
[PM2] PM2 Successfully daemonized
4.4.0

8. Yarn

$ yarn -v
1.22.4

III. Setup and Test It Locally

1. API

  • Ensure node v14.x, MongoDB, Redis server, FFMPEG, Graphicsmagick and yarn are running

  • CD to your API folder

  • Run yarn to install nodeJS dependencies

$ yarn
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

  • Create new .env from .env.example file in the root dir

  • Open file .env and change config

#################
## environment ##
#################
NODE_ENV=development
APP_NAME=YOUR_APP_NAME
ALLOW_CORS=true
PORT=9000

## Change by your app secret
SESSION_SECRET=123141413

SITE_NAME=my app
# API url, remember add / at the end
siteUrl=http://localhost:8081/
baseUrl=http://localhost:8080/

#############
## mongodb ##
#############
# Change with your uri by changing connection string https://docs.mongodb.com/manual/reference/connection-string/
MONGO_URI=mongodb://localhost/api-kernel-dev

#############
## redis   ##
#############

REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_DB=0
REDIS_PASS=
REDIS_URL=redis://localhost:6379/0

## queue
QUEUE_PREFIX=queue

############
## agenda ##
############

AGENDA_COLLECTION_NAME=agenda
AGENDA_MAX_CONCURRENCY=6

## File size limit in MB
MAX_PHOTO_SIZE=10
MAX_VIDEO_SIZE=200
MAX_FILE_SIZE=100

# Phone code is 0000 when verifying user phone number
PHONE_DEBUG=true

# enable / disble admin create, edit or remove data
isEnableForUpdate=enable

  • Run yarn dev to start development env

$ yarn dev
yarn run v1.22.4
$ NODE_ENV=development&nodemon ./server/www.js -e js,json
[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server/www.js`
....

  • Open browsers and run http://localhost:9000 it should show success message or Cannot GET /

2. Frontend Web

  • Ensure nodejs and yarn are running

  • From frontend root directory run yarn command to install nodejs dependencies

$ yarn
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

  • Open config > shared.ts file and edit information. Change with your url in development or production API url

export default {
  # In production, please change with your production url like https://api.yourdomain.com/v1
  apiEndpoint: 'http://localhost:9000/v1',
  # In production, please change with your production url like https://api.yourdomain.com
  socketUrl: 'http://localhost:9000',
  maxProfilePhotoNum: 5,
  completedProfilePhotoNum: 5
};

export default {
  # In production, please change with your production url like https://api.yourdomain.com/v1
  apiEndpoint: 'http://localhost:9000/v1',
  # In production, please change with your production url like https://api.yourdomain.com
  socketUrl: 'http://localhost:9000',
  maxProfilePhotoNum: 5,
  completedProfilePhotoNum: 5
};

  • Run export PORT=8081 or edit default port in server/index.ts at line 7 const port = parseInt(process.env.PORT || '8081', 10)

  • Run yarn run dev to start development env

$ yarn run dev
yarn run v1.22.4
$ nodemon
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server/**/* static/**/*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `ts-node --project tsconfig.server.json server/index.ts`
....

  • Then you can open browser http://localhost:8081 to see the web

3. Admin Web

  • Similar Frontend web, same steps.

  • You should change default port with 8082 then open http://localhost:8082 to see your admin app

IV. Setup Production Environment with NGINX

1. API

  • Make sure you have installed nodeJS dependencies by yarn command

  • In API root directory, copy config > development.json to config > production.json

  • Open .env file and change

    • NODE_ENV to production

    • PORT to 8080

    • Change your base url, logoUrl… to your production Url

baseUrl=https://api.yourdomain.com/
logoUrl=https://api.yourdomain.com/assets/logo.png

  • Replace your real logo in public > assets folder.

  • Change related info such as MongoDB, redis uri for production env

  • Testing by run command yarn start or node server/www.js

$ yarn start
yarn run v1.22.4
....

  • Run pm2 start server/www.js --name=api to run API under background

2. Frontend Web

  • Make sure you have installed nodeJS dependencies by yarn command

  • Edit your API url and socket Url in config > shared.ts

  • Run yarn build

$ yarn build
yarn run v1.22.4
$ next build && tsc && tsc --project tsconfig.server.json
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

> Using external babel configuration
> Location: "/Users/tuong/Projects/frontend-base-reactjs/.babelrc"
Creating an optimized production build  

Compiled with warnings.

chunk styles [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/components/video/video.less
 * css ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/components/common/layout/page.less
 * css ./node_modules/css-loader??ref--6-1!./node_modules/less-loader/dist/cjs.js??ref--6-2!./src/components/common/base/loader.less
 ....

  • Run export PORT=8081 or change port in server > index.ts file

  • Testing by run yarn start or node dist/index.js it should show success message

$ yarn start
yarn run v1.22.4
next start
ready - started server on http://localhost:8081

  • Run pm2 start yarn --interpreter bash --name xchat-web to run application under port 8081

3. Admin Web

  • Similar Frontend web, same steps.

  • You should change default port to 8082 by export PORT=8082 or change port in server > index.ts file

  • Run pm2 start yarn --interpreter bash --name xchat-admin to run app under port 8082

4. Setup NGINX

Config ports api, web, admin as following

  • API: 8080

  • Web: 8081

  • Admin: 8082

Api

  • Let say our api code is in /var/www/api.xchat.info folder and api is running under port 8080, add new file in /etc/nginx/sites-enabled/api.xchat.info and content as bellow

  • You have to change with our server name and source code path

server {
    listen 80 ;
	listen [::]:80 ;
	root /var/www/api.xchat.info;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;
    server_name api.xchat.info;
    client_max_body_size 200M;

	location / {
      proxy_pass http://localhost:8080/;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
      proxy_redirect        off;
      proxy_set_header      Host $host;
      proxy_set_header      X-Real-IP $remote_addr;
      proxy_set_header      X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header      Proxy "";

      # WebSocket support
      proxy_connect_timeout 7d;
      proxy_send_timeout 7d;
      proxy_read_timeout 7d;
	}
	
	proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    location /.well-known {
      alias /var/www/api.xchat.info/public/.well-known;
    }
	
	location /videos/protected/ {
	  auth_request /authvideo;
	  root /var/www/api.xchat.info/public/;
	}

	location = /authvideo {
	  internal;
          set $query '';
          if ($request_uri ~* "[^\?]+\?(.*)$") {
              set $query $1;
          }
          proxy_pass http://localhost:8080/v1/media/authorization?$query;
          proxy_pass_request_body   off;
          proxy_set_header Content-Length "";
	}
	location /photos/protected/ {
	  auth_request /authphoto;
	  root /var/www/api.xchat.info/public/;
	}

	location = /authphoto {
	  internal;
          set $query '';
          if ($request_uri ~* "[^\?]+\?(.*)$") {
              set $query $1;
          }
          proxy_pass http://localhost:8080/v1/media/authorization?$query;
          proxy_pass_request_body   off;
          proxy_set_header Content-Length "";
	}
}

Frontend

  • Let say our frontend code is in /var/www/xchat.info folder and Frontend app is running under port 8081, add new file in /etc/nginx/sites-enabled/xchat.info and content as bellow

  • You have to change with our server name and source code path

server {
    listen 80;
	server_name xchat.info;

	root /var/www/xchat.info;

    gzip on;
    gzip_proxied any;
    gzip_comp_level 4;
    gzip_types text/css application/javascript image/svg+xml;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    sendfile_max_chunk 512;
    client_max_body_size 200M;

	location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:8081;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    }

    location /_next/static/ {
        alias /var/www/xchat.info/.next/static/$1;
        access_log off;
        expires max;
    }

    location /static/ {
        alias /var/www/xchat.info/static/$1;
        expires max;
        autoindex off;
    }
    
    location /.well-known {
      alias /var/www/xchat.info/public/.well-known;
    }
}

Admin

  • Let say our frontend code is in /var/www/admin.xchat.info folder and Frontend app is running under port 8082, add new file in /etc/nginx/sites-enabled/admin.xchat.info and content as bellow

  • You have to change with our server name and source code path

server {
    listen 80;
	server_name admin.xchat.info;
	root /var/www/admin.xchat.info;

    gzip on;
    gzip_proxied any;
    gzip_comp_level 4;
    gzip_types text/css application/javascript image/svg+xml;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    sendfile_max_chunk 512;
    client_max_body_size 200M;

	location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:8082;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    }

    location /_next/static/ {
        alias /var/www/admin.xchat.info/.next/static/$1;
        access_log off;
        expires max;
    }

    location /static/ {
        alias /var/www/admin.xchat.info/static/$1;
        expires max;
        autoindex off;
    }
    
    location /.well-known {
      alias /var/www/admin.xchat.info/public/.well-known;
    }
}

Testing

  • Open browser and access: http://yourdomain.com to access web frontend

  • Open browser and access: http://admin.yourdomain.com to access web admin

5. Check applications are running under pm2

  • Run pm2 ls to see your applications

  • Run pm2 stop [id] to stop app or pm2 reload [id] to reload

  • Run applications in start up by pm2 startup then pm2 save

6. Set up NGINX with HTTPS

7. Migration

  • From API root directory run node server/migrate to seed default values for settings and users

    • Default Admin: admin@example.com

    • Default Password: admin

  • You can change default values in server > migrations folder

  • No labels