2018年10月18日 星期四

Deploy A React App Website With React-Router To Synology WebStation By Nginx (部署含有 React-Router 的網站到 Synology WebStation,以 Nginx為例)

When we deploy a simple ReactJS website to Synology WebStation, the easy way is put the built files into default web folder.

Assuming the site URL is http://www.example.com/

However, there is a problem when we want to access http://www.example.com/category1/ will bring 404 or 403 error.

Because React-Router is a SPA(single-page-application) project, all URL switch need start from index.html.

To fix this issue, I do a experiment with Nginx Server.

My Synology NAS model is DS415+, before the experiment, it need to prepared following:
1. Install Node.js
2. Enable SSH function on NAS

Step.1 is easy, just like this:

Install Node.js via Synology Package Center


Step.2 Enable SSH port in firewall rules.

Enable SSH port on NAS
Enable SSH port



Step.3 Create a virtual Host in Web Station





Step.4 Create a Virtual Host 

Setting to Virtual Host

Notice the "Document root" means the root of your web folder.


Step.5 Login NAS via SSH
Okay, let's log in NAS via your terminal, in here I manipulate with Cygwin console.
ssh -p {your_ssh_port} {your_account_name}@{your_NAS_ip}

Then edit file /etc/nginx/app.d/server.webstation-vhost.conf with root
root@NAS:/volume1/web/code/build# vi /etc/nginx/app.d/server.webstation-vhost.conf

Add this slice in file:
location / {
        root /volume1/web/code/build;
        index index.html;
        try_files $uri /index.html;
}

It means we try to redirect any other URI to index.html, that will make React-Router work!
Save it and reload Nginx.
root@NAS:/volume1/web/code/build# nginx -s reload


Now your website should work perfect with React-Router.


But .......

The Synology Nginx always reset this config to default after reboot. We need to add a routine task to check if file changed.

Step.6 Create a routine task
First, make a copy of certainly file server.webstation-vhost.conf to other position you like, in my case, I copy it to /volume1/web/server.webstation-vhost.conf

Start to create a task.

Then check files diff every minute or 5 minutes, it up to you.


The script code:

syn_conf=/etc/nginx/app.d/server.webstation-vhost.conf
ok_conf=/volume1/web/server.webstation-vhost.conf
syn_filesize=`ls -l $syn_conf | awk '{ print $5 }'`
ok_filesize=`ls -l $ok_conf | awk '{ print $5 }'`
if [ $syn_filesize -ne $ok_filesize ];  then cp $ok_conf $syn_conf; sudo nginx -s reload; fi


Remember to run task after create



Reference:
[1] https://www.jianshu.com/p/51ba2bec00c7
[2] https://tklab.club/synology-dsm-nginx-wordpress
[3] https://blog.oldghost.net:888/synology-reverse-proxy-usage.html

#SynologyNAS
#WebStation
#VirtualHost
#ReactJS
#ReactRouter



2018年10月1日 星期一

React refs example

class Parent extends React.Component {
   callChildFunction = () => {
       this.child.handleActionParent();  ///calling a child function here
  } 
   render(){
      return (
           <div>
           {/* other things */}
           <Child ref={(cd) => this.child = cd}/>
           </div>
      )
    }
}

class Child extends React.Component {
   handleActionParent = () => {
       console.log('called from parent')
   }
   render() {
      return (
           {/*...*/}
      )
   }
}

2018年9月28日 星期五

[JavaScript] Convert Byte to other size, Byte轉換


  bytesConvertToSize = (bytes) => {
    let sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes === 0)
        return '0 Bytes';

    let i = Math.floor(Math.log(bytes) / Math.log(1024));
    return +(Math.round(bytes / Math.pow(1024, i) + "e+2") + "e-2") + ' ' + sizes[i];

    // 下行會有尾數為 0 的狀況,因此改另一方法
    // With problem 123.499 will be 123.50 KB,
    // return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];

  }