找了很多博客，最后才成功，🤦?太難啦。

大家要是最后成功了一定要記得來給我點(diǎn)個贊哦。每一步都是帶圖帶解析的實(shí)操。 后端部署到服務(wù)器的鏈接 在這里：
https://blog.csdn.net/weixin_45821811/article/details/116244003

步驟：

1、打包

先將前端vue項(xiàng)目打包

運(yùn)行命令：

npm run build

等它打包完就可以啦。

2、Dockerfile文件

寫一個Dockerfile文件

FROM nginx #拉取nginx鏡像 COPY ./dist/ /usr/share/nginx/html/ #將dist目錄下內(nèi)容拷貝到容器中的/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 云服務(wù)器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、上傳文件

把前面準(zhǔn)備的三個文件都上傳到云服務(wù)器上同一個文件夾下

5、打包成鏡像

都準(zhǔn)備好之后進(jìn)入到存放這三個文件的目錄。

執(zhí)行docker的打包命令。

docker build -t wyj_news_vue:1.0.1 . # wyj_news_vue:1.0.1 是我打包成鏡像的名字 :1.0.1 是我跟的版本好 不寫的話就是 latest #最后的小數(shù)點(diǎn)不能丟 這代表在這個目錄 dockerfile文件

顯示是這樣就是打包成功了。

如果沒有成功的話，看一下有沒有輸錯打包命令，最后的小數(shù)點(diǎn)有沒有加上去。

6、啟動項(xiàng)目

docker啟動鏡像

docker run --name wyj_news_vue -p 8050:80 -d wyj_news_vue:1.0.1

底下只有這一行數(shù)據(jù)就證明是啟動成功了。

• –name 是給啟動的這個容器取個名字
• -p 做一個端口暴露
• -d 后臺運(yùn)行
• wyj_news_vue:1.0.1 就是我之前打包的鏡像名字

測試

我這里開放的端口是8050

我在瀏覽器中輸入 ip地址:8050 就能訪問到我的項(xiàng)目啦。

拿內(nèi)網(wǎng)測試是歐克的

接著拿外網(wǎng)測試 也是可以的

自言自語

記錄一下自己做的小demo ，終于成功啦上線了前后端項(xiàng)目，后端已經(jīng)在另一篇文章中寫啦。

這次終于把前端也上線了。

在云服務(wù)器上用docker部署項(xiàng)目真的非常方便，也很爽，但是為了能夠一直爽下去，下一步要開始學(xué)習(xí)一下腳步語言了。

當(dāng)然 如果你也這樣部署成功了，可以給我來點(diǎn)個贊嗎？

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的史上最详细阿里云服务器上Docker部署vue项目 实战 每一步都带详细图解！！！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。