2017年1月20日 星期五
2017年1月17日 星期二
噴錯解法 figure out why the markup being generated is different on the client or server:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) id="1">
(client) id="1">
{
(global as any).navigator.userAgent = req.headers['user-agent'] || 'all';
(global as any).navigator = (global as any).navigator || {};
..
}
2017年1月14日 星期六
multi docker 部署 aws eb Dockerrun.aws.json
{
"AWSEBDockerrunVersion": 2, //aws eb docker 版本號
"volumes": [ //要對應 docker-compose.yml 的 contianer 的 volume設定
{
"name": "app-api",
"host": {
"sourcePath": "/var/app/current/api" //外部mapping到那裡
}
},
{
"name": "app-ui",
"host": {
"sourcePath": "/var/app/current/ui"
}
},
{
"name": "nginx-proxy-conf",
"host": {
"sourcePath": "/var/app/current/proxy/conf.d"
}
}
],
"containerDefinitions": [
{
"name": "app-api",
"image": "node:latest", //不支援 "." ,可是 aws eb 的 single docker 是支援的
"essential": true,
"memory": 256, //全部加起來不能超過ec2機子的總量,卡這裡卡很久
"command": [
"/bin/bash",
"/usr/src/app/run-prod.sh"
],
"mountPoints": [
{
"sourceVolume": "app-api",
"containerPath": "/usr/src/app"
}
]
},
{
"name": "app-ui",
"image": "node:latest",
"essential": true,
"memory": 256,
"command": [
"/bin/bash",
"/usr/src/app/run-prod.sh"
],
"portMappings": [
{
"hostPort": 3000,
"containerPort": 3000
}
],
"mountPoints": [
{
"sourceVolume": "app-ui",
"containerPath": "/usr/src/app"
}
]
},
{
"name":"db",
"image":"mongo",
"essential": true,
"memory": 128,
"portMappings": [
{
"hostPort": 27017,
"containerPort": 27017
}
]
},
{
"name": "nginx-proxy",
"image": "nginx",
"essential": true,
"memory": 128,
"portMappings": [
{
"hostPort": 80,
"containerPort": 80
}
],
"links": [
"app-api",
"app-ui",
"db"
],
"mountPoints": [
{
"sourceVolume": "awseb-logs-nginx-proxy",
"containerPath": "/var/log/nginx"
},
{
"sourceVolume": "nginx-proxy-conf",
"containerPath": "/etc/nginx/conf.d",
"readOnly": true
}
]
}
]
}
"AWSEBDockerrunVersion": 2, //aws eb docker 版本號
"volumes": [ //要對應 docker-compose.yml 的 contianer 的 volume設定
{
"name": "app-api",
"host": {
"sourcePath": "/var/app/current/api" //外部mapping到那裡
}
},
{
"name": "app-ui",
"host": {
"sourcePath": "/var/app/current/ui"
}
},
{
"name": "nginx-proxy-conf",
"host": {
"sourcePath": "/var/app/current/proxy/conf.d"
}
}
],
"containerDefinitions": [
{
"name": "app-api",
"image": "node:latest", //不支援 "." ,可是 aws eb 的 single docker 是支援的
"essential": true,
"memory": 256, //全部加起來不能超過ec2機子的總量,卡這裡卡很久
"command": [
"/bin/bash",
"/usr/src/app/run-prod.sh"
],
"mountPoints": [
{
"sourceVolume": "app-api",
"containerPath": "/usr/src/app"
}
]
},
{
"name": "app-ui",
"image": "node:latest",
"essential": true,
"memory": 256,
"command": [
"/bin/bash",
"/usr/src/app/run-prod.sh"
],
"portMappings": [
{
"hostPort": 3000,
"containerPort": 3000
}
],
"mountPoints": [
{
"sourceVolume": "app-ui",
"containerPath": "/usr/src/app"
}
]
},
{
"name":"db",
"image":"mongo",
"essential": true,
"memory": 128,
"portMappings": [
{
"hostPort": 27017,
"containerPort": 27017
}
]
},
{
"name": "nginx-proxy",
"image": "nginx",
"essential": true,
"memory": 128,
"portMappings": [
{
"hostPort": 80,
"containerPort": 80
}
],
"links": [
"app-api",
"app-ui",
"db"
],
"mountPoints": [
{
"sourceVolume": "awseb-logs-nginx-proxy",
"containerPath": "/var/log/nginx"
},
{
"sourceVolume": "nginx-proxy-conf",
"containerPath": "/etc/nginx/conf.d",
"readOnly": true
}
]
}
]
}
2017年1月9日 星期一
aws eb Multi-container Docker 1.11.2 (Generic) 範例
aws eb
git clone https://github.com/troygoode/docker-compose-and-elastic-beanstalk
git clone https://github.com/troygoode/docker-compose-and-elastic-beanstalk
Dockerfile nodejs + nginx
nginx.conf worker_processes 4; events { worker_connections 1024; } http { server { listen 80; server_name localhost client_max_body_size 1000M; access_log /var/log/nginx/http.log; gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_min_length 256; gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon; location / { 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 X-Forwarded-Proto $scheme; proxy_pass http://localhost:3000; proxy_read_timeout 300; } } } ========
Dockerfile
FROM node:7.4.0 RUN mkdir -p /usr/src/app WORKDIR /usr/src/app ARG NODE_ENV ENV NODE_ENV $NODE_ENV RUN npm install yarn -g ADD package.json /usr/src/app/package.json RUN yarn ENV NGINX_VERSION 1.11.8-1~jessie RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 \ && echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" >> /etc/apt/sources.list \ && apt-get update \ && apt-get install --no-install-recommends --no-install-suggests -y \ ca-certificates \ nginx=${NGINX_VERSION} \ nginx-module-xslt \ nginx-module-geoip \ nginx-module-image-filter \ nginx-module-perl \ nginx-module-njs \ gettext-base \ && rm -rf /var/lib/apt/lists/* # forward request and error logs to docker log collector RUN ln -sf /dev/stdout /var/log/nginx/access.log \ && ln -sf /dev/stderr /var/log/nginx/error.log # Remove the default Nginx configuration file RUN rm -v /etc/nginx/nginx.conf # Copy a configuration file from the current directory ADD nginx.conf /etc/nginx/ # Append "daemon off;" to the configuration file RUN echo "daemon off;" >> /etc/nginx/nginx.conf COPY . /usr/src/app/ CMD service nginx start & npm start; EXPOSE 80
2017年1月4日 星期三
解client和server相同名稱用不同套件
webpack
new webpack.ProvidePlugin({
Parse: "parse"
})
new webpack.ProvidePlugin({
Parse: "parse"
})
//在client會當做全域
另外要注意 參數如果有要設到 url
server端要設 "http://xxx/parse"
client端設 "/parse"
訂閱:
文章 (Atom)