Dockerfile部署vue项目参考demo（一）

1.先将vue项目通过npm run build 打包

2.将整个dist 文件拷贝到 /usr/share/路径下

3.并且在/usr/share/ 路径下创建Dockerfile 

1. # 设置基础镜像

2. FROM nginx

3. # 定义作者

4. MAINTAINER longdb

5. # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面

6. COPY dist/ /usr/share/nginx/html/

7. COPY nginx.conf /etc/nginx/nginx.conf

8. RUN echo 'echo init ok!!'

4.创建nginx.conf

1. worker_processes auto;

2. #error_log logs/error.log;

3. #error_log logs/error.log notice;

4. #error_log logs/error.log info;

5. #pid logs/nginx.pid;

6. events {

7. worker_connections 1024;

8. }

9. http {

10. include mime.types;

11. default_type application/octet-stream;

12. #log_format main '$remote_addr - $remote_user [$time_local] "$request" '

13. # '$status $body_bytes_sent "$http_referer" '

14. # '"$http_user_agent" "$http_x_forwarded_for"';

15. #access_log logs/access.log main;

16. sendfile on;

17. #tcp_nopush on;

18. #keepalive_timeout 0;

19. keepalive_timeout 65;

20. #gzip on;

21. client_max_body_size 20m;

22. server {

23. listen 80;

24. server_name www.longdb.com;# 这里换域名

25. #charset koi8-r;

26. #access_log logs/host.access.log main;

27. location / {

28. root /usr/share/nginx/html;

29. index index.html index.htm;

30. try_files $uri $uri/ /index.html;

31. }

32. #error_page 404 /404.html;

33. # redirect server error pages to the static page /50x.html

34. #

35. error_page 500 502 503 504 /50x.html;

36. location = /50x.html {

37. root html;

38. }

39. # proxy the PHP scripts to Apache listening on 127.0.0.1:80

40. #

41. #location ~ \.php$ {

42. # proxy_pass http://127.0.0.1;

43. #}

44. # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

45. #

46. #location ~ \.php$ {

47. # root html;

48. # fastcgi_pass 127.0.0.1:9000;

49. # fastcgi_index index.php;

50. # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

51. # include fastcgi_params;

52. #}

53. # deny access to .htaccess files, if Apache's document root

54. # concurs with nginx's one

55. #

56. #location ~ /\.ht {

57. # deny all;

58. #}

59. }

60. # another virtual host using mix of IP-, name-, and port-based configuration

61. #

62. #server {

63. # listen 8000;

64. # listen somename:8080;

65. # server_name somename alias another.alias;

66. # location / {

67. # root html;

68. # index index.html index.htm;

69. # }

70. #}

71. }

5.进入/usr/share 执行以下命令 创建镜像

docker build -t vue:V1.0.0 .

6.运行生产的镜像

docker run -p 80:80 -d --name longdbvuejs 34d9e8770f1b