| 史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解！！！ | 您所在的位置：网站首页 › php项目部署到云服务器 › 史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解！！！ |
史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解！！！
|
找了很多博客，最后才成功，🤦太难啦。 大家要是最后成功了一定要记得来给我点个赞哦。每一步都是带图带解析的实操。 后端部署到服务器的链接 在这里： https://blog.csdn.net/weixin_45821811/article/details/116244003 步骤： 1、打包先将前端vue项目打包 运行命令： npm run build
等它打包完就可以啦。 2、Dockerfile文件写一个Dockerfile文件 FROM nginx #拉取nginx镜像 COPY ./dist/ /usr/share/nginx/html/ #将dist目录下内容拷贝到容器中的/usr/share/nginx/html/目录 COPY nginx.conf /etc/nginx/nginx.conf #将nginx.conf配置文件拷贝到容器中 3、Nginx.cong配置文件 #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; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; client_max_body_size 20m; server { listen 80; server_name 云服务器ip地址; #charset koi8-r; #access_log logs/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } } } 4、上传文件把前面准备的三个文件都上传到云服务器上同一个文件夹下
都准备好之后进入到存放这三个文件的目录。 执行docker的打包命令。 docker build -t wyj_news_vue:1.0.1 . # wyj_news_vue:1.0.1 是我打包成镜像的名字 :1.0.1 是我跟的版本好 不写的话就是 latest #最后的小数点不能丢 这代表在这个目录 dockerfile文件
显示是这样就是打包成功了。 如果没有成功的话，看一下有没有输错打包命令，最后的小数点有没有加上去。 6、启动项目docker启动镜像 docker run --name wyj_news_vue -p 8050:80 -d wyj_news_vue:1.0.1
底下只有这一行数据就证明是启动成功了。 –name 是给启动的这个容器取个名字-p 做一个端口暴露-d 后台运行wyj_news_vue:1.0.1 就是我之前打包的镜像名字 测试我这里开放的端口是8050 我在浏览器中输入 ip地址:8050 就能访问到我的项目啦。 拿内网测试是欧克的
接着拿外网测试 也是可以的
记录一下自己做的小demo ，终于成功啦上线了前后端项目，后端已经在另一篇文章中写啦。 这次终于把前端也上线了。 在云服务器上用docker部署项目真的非常方便，也很爽，但是为了能够一直爽下去，下一步要开始学习一下脚步语言了。 当然 如果你也这样部署成功了，可以给我来点个赞吗？
|
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZ3FlXuw-1619616926809)(发布项目到服务器上的Docker.assets/21f15fe11b7a84d2f2121c16dec50a4e4556f865.png@100w_100h.webp)]](https://img-blog.csdnimg.cn/20210428214019582.png#pic_center)
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |