Question

我用一个非常基本的配置创建了一个简单的VueJS应用。我使用webpack配置来做到这一点。

vue init webpack app

我构建了这个简单的Dockerfile

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 3838
CMD [ "http-server", "dist" ]

此应用程序应在仅监听3838端口的平台上运行。不幸的是，将Dockerfile更改为EXPOSE 3838并没有起作用。

sudo docker run -it -p 3838:3838 vuetest

Starting up http-server, serving dist
Available on:
  http://127.0.0.1:8080

容器运行，但仍在8080上运行。

我对VueJS和部署都不熟悉，所以有人可以帮助我吗？我猜可能要在其他文件中设置用于监听8080的配置，而Dockerfile会忽略它。

Answer 1

您的应用程序服务器默认在8080上运行

https://www.npmjs.com/package/http-server

使用标志-p 3838在该端口上服务。 Docker工作正常，请调整您的CMD

CMD [ "http-server", "-p 3838", "dist" ]

Answer 2

您可以尝试仅使用Continer的端口8080并将其映射到主机的3838端口。

import React, { Component, PureComponent } from 'react';
import { View, FlatList, RefreshControl, StatusBar, Animated, ScrollView, PanResponder } from 'react-native';
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';
import { connect } from 'react-redux';
import i18n from 'i18n-js';
import Post from '../components/Post';
import AppHeader from '../components/AppHeader';

class Posts extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      curY: new Animated.Value(0),
      height: 0
    };
  }

  render() {
    const { postsReducer } = this.props,
      { container } = styles;

    return (
      <View style={container}>
        <Animated.View
          style={{
            transform: [{
              translateY: this.state.curY.interpolate({
                inputRange: [0, 1],
                outputRange: [0, -1]
              })
            }], position: 'absolute', top: 0, width: wp('100%'), marginTop: StatusBar.currentHeight
          }}
          onLayout={({ nativeEvent }) => this.setState({ height: nativeEvent.layout.height })}
        >
          <AppHeader />
        </Animated.View>

        <Animated.ScrollView
          scrollEventThrottle={16}
          refreshControl={
            <RefreshControl
              onRefresh={this._onRefresh}
              refreshing={refreshing}
              tintColor='#5E81F4'
              colors={["blue", "lightblue"]}
            />
          }
          contentContainerStyle={{ marginTop: this.state.height }}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.curY } } }],
            { useNativeDriver: true }
          )}

        >
          {postsReducer.map((item, index) => (
            <Post
              postId={item._id}
              userId={item.owner}
              owner={item.owner}
              title={item.title}
              avatar={item.picture}
              userName={item.userName}
              updatedAt={item.updatedAt}
              image={item.photo.split(",")}
              description={item.description}
              age={item.age}
              time={item.time}
              date={item.date}
              location={item.location}
              city={item.city}
              commentCounter={item.commentCounter}
              key={index}
            />
          ))}
        </Animated.ScrollView>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',

  }
};

const mapStateToProps = ({ registrationReducer, postsReducer, usersReducer, }) => (
  {
    registrationReducer,
    postsReducer,
    usersReducer
  }
);

export default connect(mapStateToProps, { setPosts })(Posts);

这是不向Dockerfile添加更多行的选项。再见

使用docker

2 个答案: