前提：前端项目使用了mock模拟接口 执行run build打包后无法加载Mock 所以需要使用node镜像来运行Vue应用
构建运行环境
拉取最新版Node镜像
1
| $ docker pull node:latest
|
对node镜像容器端口进行映射
1
| $ docker run -dti --name=blade-web 8001:8001 node
|
docker ps查看镜像运行信息
将项目文件夹拷贝到node容器中
1
2
| #docker cp 需要拷贝的文件或目录 容器id或容器名称:容器目录
$ docker cp /root/blade-web 40030412bc62:/usr
|
拷贝成功后 进入容器
1
2
| #docker exec -it 容器id或容器名称 /bin/bash
$ docker exec -it 40030412bc62 /bin/bash
|
进入容器中vue项目所在的路径 执行
1
2
3
| $ npm install
#安装sass构建工具
$ npm rebuild node-sass --force
|
安装完成后运行项目
项目运行成功后浏览器进入对应地址即可访问 不过无法请求到网关 需要添加Nginx映射
添加nginx映射
本地执行nginx.sh安装nginx
进入/usr/local/nginx/conf 编辑nginx.conf
将下面配置粘贴到conf 将原来的删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
upstream gateway {
server 网关地址;
}
server {
listen 8000;
server_name 本机地址;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_set_header x-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header x-Forwarded-Proto https;
proxy_redirect http:// http://;
proxy_connect_timeout 240;
#这里映射vue应用的端口8001
proxy_pass http://127.0.0.1:8001;
}
location ^~ /oauth/redirect {
rewrite ^(.*)$ /index.html break;
}
location ^~/api {
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_buffering off;
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://gateway;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
}
|
问题
执行npm run serve报错
/node_modules/open/index.js:29…options^^^ SyntaxError: Unexpected token …
原因：node版本过低
1
2
| $ node update
$ npm update
|
More info: Deployment
